Dans cet exemple, le mouvement du cercle est lent et marque un léger arrêt en position horizontale.
On voit tout de suite quelle partie du code définit ce mouvement.
}
#animDivLente{
animation-name:rotation; -webkit-animation-name:rotation;
-moz-animation-name:rotation; -o-animation-name:rotation;
animation-duration:6s; -webkit-animation-duration:6s;
-moz-animation-duration:6s; -o-animation-duration:6s;
animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
Puis, à la fin
}
</style>
<div class="divRonde" id="animDivLente">Tout doux</div>
CODE
<style type="text/css">.divRonde{
display:inline-block;
margin:20px;
width:150px;
height:150px;
border:solid 1px black;
background-color:lightsteelblue;
border-radius:75px;
line-height:150px;
font-size:24px;
text-align:center;
}
#animDivLente{
animation-name:rotation; -webkit-animation-name:rotation;
-moz-animation-name:rotation; -o-animation-name:rotation;
animation-duration:6s; -webkit-animation-duration:6s;
-moz-animation-duration:6s; -o-animation-duration:6s;
animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
}
@keyframes rotation{
from {transform:rotate(0deg);} to {transform:rotate(360deg);}
}
@-webkit-keyframes rotation{
from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation{
from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation{
from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);}
}
</style>
<div class="divRonde" id="animDivLente">Tout doux</div>
RESULTAT
Dans cet exemple, au contraire, le mouvement est rapide, défini par le temps de rotation: 2 secondes.
CODE
<style type="text/css">.divRonde{
display:inline-block;
margin:20px;
width:150px;
height:150px;
border:solid 1px black;
background-color:lightsteelblue;
border-radius:75px;
line-height:150px;
font-size:24px;
text-align:center;
}
#animDivRapide{
animation-name:rotation; -webkit-animation-name:rotation;
-moz-animation-name:rotation; -o-animation-name:rotation;
animation-duration:2s; -webkit-animation-duration:2s;
-moz-animation-duration:2s; -o-animation-duration:2s;
animation-iteration-count:infinite; -webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
}
@keyframes rotation{
from {transform:rotate(0deg);} to {transform:rotate(360deg);}
}
@-webkit-keyframes rotation{
from {-webkit-transform:rotate(0deg);} to {-webkit-transform:rotate(360deg);}
}
@-moz-keyframes rotation{
from {-moz-transform:rotate(0deg);} to {-moz-transform:rotate(360deg);}
}
@-o-keyframes rotation{
from {-o-transform:rotate(0deg);} to {-o-transform:rotate(360deg);}
}
</style>
<div class="divRonde" id="animDivRapide">Plus vite !</div>
RESULTAT
Haut de page
commentaires