Maison >interface Web >tutoriel CSS >Explication détaillée des propriétés d'animation CSS3 (avec code)
Explication détaillée des propriétés d'animation CSS3 (avec code)
- 不言original
- 2018-08-10 10:11:312281parcourir
Ce que cet article vous apporte, c'est une explication détaillée des propriétés d'animation de CSS3 (avec code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
l'animation css3 (animation) a les attributs suivants :
1. nom d'animation nom d'animation personnalisé
2. durée d'animation spécifie le nombre de secondes ou de millisecondes nécessaires pour terminer l'animation. . La valeur par défaut est 0;
3. animation-timing-function La courbe temporelle de l'animation, linéaire, est à vitesse constante, la facilité est lente au début puis rapide, puis ralentit avant la fin.
4. animation-delay L'intervalle de retard avant le démarrage de l'animation, la valeur par défaut est 0
5. animation-iteration-count Le nombre de fois que l'animation est jouée, la valeur par défaut est 1
6. animation- direction S'il faut jouer à l'envers à tour de rôle Animation
7. animation-play-state Si l'animation est en cours d'exécution ou en pause. Valeur : paused spécifie l'animation en pause en cours d'exécution ; spécifie l'animation en cours d'exécution, par défaut.
Exemple : Cette démo utilise la traduction comme exemple pour illustrer l'ensemble du processus d'animation
html :
<body> <div class="warp"> </div> </body>
css :
.warp{
height: 100px;
width: 100px;
border: 1px solid #eee;
animation-name:moves;
animation-direction:alternate;
animation-delay: 0.2s;
animation-duration: 5s;
animation-play-state: paused;
animation-iteration-count: 3;
/*以上可以简写成：*/
animation: moves 5s linear 0.2s 3;
}
@keyframes moves{ /*动画名称自定义*/
10%{ /*时间点可以任意，10%表示当时间进行到10%是元素要达到的状态*/
transform: translate(100px,0);
-ms-transform:translate(100px,0); /*IE 9*/
-moz-transform:translate(100px,0); /* Firefox */
-webkit-transform:translate(100px,0); /* Safari 和 Chrome */
-o-transform:translate(100px,0); /* Opera */
}
30%{ /*时间点可以任意*/
transform: translate(100px,100px);
-ms-transform:translate(100px,100px); /*IE 9*/
-moz-transform:translate(100px,100px); /* Firefox */
-webkit-transform:translate(100px,100px); /* Safari 和 Chrome */
-o-transform:translate(100px,100px); /* Opera */
}
60%{ /*时间点可以任意*/
transform: translate(0,100px);
-ms-transform:translate(0,100px); /*IE 9*/
-moz-transform:translate(0,100px); /* Firefox */
-webkit-transform:translate(0,100px); /* Safari 和 Chrome */
-o-transform:translate(0,100px); /* Opera */
}
100%{ /*时间点可以任意*/
transform: translate(0,0);
-ms-transform:translate(0,0); /*IE 9*/
-moz-transform:translate(0,0); /* Firefox */
-webkit-transform:translate(0,0); /* Safari 和 Chrome */
-o-transform:translate(0,0); /* Opera */
}
}
Recommandations associées :
Comment faire clignoter l'affichage du texte uniquement en utilisant du code CSS ? (Exemple de code)
Comment utiliser CSS et D3 pour obtenir une animation à effet de swing cycloïde
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!