Le dégradé de couleurs s'exprime ainsi entre 0 et 100 pour 100.
0% {width: 150px; background-color:red;}
100% {width: 500px; background-color:pink;} }
PATIENTEZ CAR C'EST LONG A DEMARRER !
NE FONCTIONNE PAS AVEC TOUS LES NAVIGATEURS.
RESULTAT
CODE
<style type="text/css">
#AnimAllonge
{
position:relative;
left:20px;
top:20px;
padding:0px 10px;
width:150px;
height:50px;
background-color:blue;
border:solid 2px black;
border-radius:25px;
animation-name: AnimationAllonge; -webkit-animation-name: AnimationAllonge;
-moz-animation-name: AnimationAllonge; -o-animation-name: AnimationAllonge;
animation-duration: 1s; -webkit-animation-duration: 1s;
-moz-animation-duration: 1s; -o-animation-duration: 1s;
animation-iteration-count: infinite; -webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite; -o-animation-iteration-count: infinite;
animation-timing-function:linear; -webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear; -o-animation-timing-function:linear;
animation-direction:alternate; -webkit-animation-direction:alternate;
-moz-animation-direction:alternate; -o-animation-direction:alternate;
}
@keyframes AnimationAllonge {
0% {width: 150px; background-color:red;}
100% {width: 500px; background-color:pink;} }
@-webkit-keyframes AnimationAllonge {
0% {width: 150px; background-color:red;}
100% {width: 500px; background-color:pink;} }
@-moz-keyframes AnimationAllonge {
0% {width: 150px; background-color:red;}
100% {width: 500px; background-color:pink;} }
@-o-keyframes AnimationAllonge {
0% {width: 150px; background-color:red;}
100% {width: 500px; background-color:pink;} }
</style>
<div id="AnimAllonge">
<label style="float:left; font-size:24px; line-height:50px;">Ping !</label>
<label style="float:right; font-size:24px; line-height:50px;">Pong !</label>
</div>
Haut de page