Maison >interface Web >tutoriel CSS >implémentation CSS3 de l'effet d'animation
implémentation CSS3 de l'effet d'animation
- 青灯夜游original
- 2018-09-12 18:05:072361parcourir
Ce chapitre vous présentera l'implémentation de l'effet d'animation CSS3, afin que vous puissiez comprendre comment une simple animation CSS3 est implémentée. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.
css3-animation :
a les attributs suivants :
1. 2. animation-duration 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 à vitesse constante, facilité au début. lentement puis vite, puis ralentissez avant la fin.
4. animation-delay est l'intervalle de retard avant de démarrer l'animation, la valeur par défaut est 0
5. animation-iteration-count est le nombre de fois que l'animation est jouée, la valeur par défaut est 1
6. animation-direction indique 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 une animation en pause en cours d'exécution ; par défaut.
Exemple de code (en prenant la traduction --translate comme exemple pour illustrer l'ensemble du processus d'animation) :
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.warp {
height: 100px;
width: 100px;
border: 1px solid #eee;
background-color: #21B4BB;
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% {
background-color: #21B4BB;
/*时间点可以任意，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% {
background-color: #008000;
/*时间点可以任意*/
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% {
background-color: #444444;
/*时间点可以任意*/
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% {
background-color: #70DBDB;
/*时间点可以任意*/
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 */
}
}
</style>
</head>
<body>
<div class="warp">
</div>
</body>
</html>Rendu :
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!