Animation qui permet de faire rouler une boule sur une ligne
Ce code permet de transformer une sphère statique en sphère animée dont on peut changer la vitesse de rotation, la couleur et la forme.
A)-COULEUR
1)-Pour la couleur du bord que je désigne indifféremment par le code couleur ou par le terme anglais:
border:solid 10px #909E87;
2)-Pour la couleur du fond
background-color:blue;
B)-FORME
Il suffit de changer "width" et "heigt" pour obtenir une autre forme géométrique.
C)-TEMPS DE ROTATION
Il suffit de changer 4s, soit plus, soit moins pour être plus rapide.
D)-MOUVEMENT
Le mouvement est déclaré "infinite" donc ne s'arrête pas et "alternate" pour aller de gauche à doite puis de droite à gauche. Ceci peut aussi être modifié.
CODE
#animDiv{
position:relative;
display:inline-block;
width:150px;
height:150px;
border:solid 10px #909E87;
border-radius:85px;
background-color:blue;
line-height:150px;
font-size:24px;
text-align:center;
animation-name:animRoule; -webkit-animation-name:animRoule;
-moz-animation-name:animRoule; -o-animation-name:animRoule;
animation-duration:4s; -webkit-animation-duration:4s;
-moz-animation-duration:4s; -o-animation-duration:4s;
animation-iteration-count :infinite; -webkit-animation-iteration-count:infinite;
-moz-animation-iteration-count:infinite; -o-animation-iteration-count:infinite;
animation-direction:alternate; -webkit-animation-direction:alternate;
-moz-animation-direction:alternate; -o-animation-direction:alternate;
animation-timing-function:linear; -webkit-animation-timing-function:linear;
-moz-animation-timing-function:linear; -o-animation-timing-function:linear;
animation-delay:10s; -webkit-animation-delay:10s;
-moz-animation-delay:10s; -o-animation-delay:10s;
}
@keyframes animRoule{
from {transform:rotate(0deg); left:0px;} to {transform:rotate(360deg); left:350px;}
}
@-webkit-keyframes animRoule{
from {-webkit-transform:rotate(0deg); left:0px;} to {-webkit-transform:rotate(360deg); left:350px;}
}
@-moz-keyframes animRoule{
from {-moz-transform:rotate(0deg); left:0px;} to {-moz-transform:rotate(360deg); left:350px;}
}
@-o-keyframes animRoule{
from {-o-transform:rotate(0deg); left:0px;} to {-o-transform:rotate(360deg); left:350px;}
}
</style>
<div id="animDiv">
Allez !
</div>
RESULTAT retardé de 10 secondes.
Haut de page
commentaires