Résumé des façons d'obtenir des effets d'animation dans les compétences du didacticiel HTML5 _html5

/*Définir l'animation : passer de la position -400px à la position 1600px*/
@keyframes carAnimation
{
0% { left:-400px } /* Spécifier la position initiale, 0% équivaut à from*/
100% { left:1600px; } /* Spécifie la position finale, 100% équivaut à to*/
}
/* Safari et Chrome */
@ -webkit-keyframes carAnimation
{
0% {left:-400px; }
100% {left:1600px;
}
/* Firefox */
@ -moz -keyframes carAnimation
{
0% {left:-400; }
100% {left:1600px;
}
/*IE ne prend pas encore en charge cette définition. est pour Back compatible avec IE10*/
@-ms-keyframes carAnimation
{
0% {left:-400px }
100%{left:1600px }
} @keyframes; tyreAnimation
{
0% {transform: rotate(0); }
100% {transform: rotate(1800deg);
}
@-webkit-keyframes tyreAnimation
{
0% { -webkit-transform: rotate(0); }
100% { -webkit-transform: rotate(1800deg }
}
@-moz-keyframes tyreAnimation
{
0% { -moz-transform : rotation(0); }
100 % { -moz-transform : rotation(1800deg) }
}
@-ms-keyframes tyreAnimation
{
0% { -ms-transform: rotate(0); }
100% { -ms-transform: rotate(1800deg); }
} #container
{
position :relative;
largeur:100%;
hauteur:600px;
overflow:hidden; /*C'est très important*/
}
#car
{
position :absolute; / *La voiture est positionnée de manière absolue dans le conteneur*/
width:400px
height:210px /*La hauteur totale de la voiture, pneus et châssis compris*/
z-index; :1; /*Laissez la voiture au-dessus de l'arrière-plan*/
top:300px; /*Distance du haut (axe y)*/
gauche:50px; /
/* Le contenu suivant donne à l'élément une animation prédéfinie et les attributs associés*/
-webkit-animation-name:carAnimation; /*name*/
-webkit-animation-duration:10s; durée*/
-webkit-animation-iteration-count:infinite; /*Nombre d'itérations-infini*/
-webkit-animation-timing-function:linear /*Lire l'animation à la même vitesse depuis le début pour terminer* /
-moz-animation-name:carAnimation; /*name*/
-moz-animation-duration:10s /*duration*/
-moz-animation-iteration-count : infini; /*Nombre d'itérations - illimité*/
-moz-animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/
-ms-animation-name:carAnimation ; /*Nom*/
-ms-animation-duration:10s /*Duration*/
-ms-animation-iteration-count:infinite; /*Nombre d'itérations-infini*/
- ms-animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/
animation-name:carAnimation; /*Name*/
animation-duration:10s; */
animation-iteration-count:infinite; /*Nombre d'itérations-infini*/
animation-timing-function:linear; /*Lire l'animation à la même vitesse du début à la fin*/
}
/*corps*/
#châssis
{
position:absolue;
largeur:400px
hauteur:130px
arrière-plan:#FF9900; border: 2px solid #FF6600;
}
/*Tire*/
.tire
{
z-index:1 /*Identique à ci-dessus, le pneu doit également être placé dans l'arrière-plan au-dessus*/
position:absolute;
bottom:0;
border-radius:60px; /*circle radius*/
height:120px;
width:120px; /* 2*radius=width */
background:#0099FF; /*fill color*/
border:1px solid #3300FF
-webkit-animation-name : tyreAnimation ;
-webkit-animation-duration:10s;
-webkit-animation-iteration-count:infinite
-webkit-animation-timing-function:linear; nom :tyreAnimation;
-moz-animation-duration:10s;
-moz-animation-iteration-count:infinite
-moz-animation-timing-function:linear; animation -name:tyreAnimation;
-ms-animation-duration:10s;
-ms-animation-iteration-count:infinite
-ms-animation-timing-function:linear; - name:tyreAnimation;
animation-duration:10s;
animation-iteration-count:infinite;
animation-timing-function
}
#fronttire
{
right:20px; /*Réglez la distance entre le pneu droit et le bord à 20*/
}
#backtire
{
left:20px /*Définissez la distance entre le pneu gauche; pneu et le bord à 20*/
}
#grass
{
position:absolute; /*Le fond est positionné de manière absolue dans le conteneur*/
width:100% height:130px;
bottom:0;
/*Laissez la couleur d'arrière-plan dégradée linéairement, en bas, représenter le point de départ du dégradé, la première valeur de couleur est la valeur de départ du dégradé, la deuxième valeur de couleur est la valeur finale*/
background:linear-grdaient(bottom,#33CC00,#66FF22);
background:-webkit-linear-gradient(bottom,#33CC00,#66FF22); -moz-linear-gradient(bottom, #33CC00,#66FF22);
background:-ms-linear-gradient(bottom,#33CC00,#66FF22
}
.hr,.vr {
position:absolue ;
arrière-plan:#3300FF;
}
.hr
{
hauteur:1px
largeur:100%; du pneu*/
gauche:0
top:60px
}
.vr
{
largeur:1px;
hauteur:100%; /*Ligne verticale du pneu*/
gauche
haut:0
}