Propriété d'animation CSS3
Explication détaillée de l'utilisation de l'attribut animation de CSS3 :
animation se traduit en chinois par "animation". En effet, l'attribut animation est utilisé pour définir le effet d'animation d'un élément Bien sûr, il est plus grossier que les animations réalisées avec flash ou js, mais il peut répondre à nos besoins de base en animation, il est donc nécessaire de maîtriser cet attribut.
1. Connaissances de base :
Avant de lire l'article suivant, il est recommandé de se référer au préalable à l'explication détaillée de l'utilisation des @keyframes en CSS3.
Les effets de transition d'animation peuvent être obtenus en utilisant l'attribut de transition, mais cet attribut présente un inconvénient, c'est-à-dire que le processus de transition de la valeur initiale à la valeur finale est mal contrôlable, ce qui signifie que l'effet d'animation ne peut pas être contrôlé plus détail, et L'attribut d'animation peut être combiné avec le nom de l'animation défini par @keyframes pour contrôler le processus de transition d'animation plus en détail. Cet attribut est un attribut composite comme la bordure, l'arrière-plan et d'autres attributs.
Pour plus d'informations sur l'attribut transition, veuillez vous référer à l'explication détaillée de l'attribut transition de CSS3.
Structure grammaticale :
animation：[[ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ]] [ , [ animation-name ] || [ animation-duration ] || [ animation-timing-function ] || [ animation-delay ] || [ animation-iteration-count ] || [ animation-direction ] || [animation-play-state] || [animation-fill-mode]]*
Analyse des paramètres :
1.animation-name : Cet attribut spécifie le nom de l'animation appliqué à l'élément. Ce nom est défini par @keyframes.
2.animation-duration : Cet attribut est utilisé pour spécifier la durée de l'animation.
3.animation-timing-function : Utilisé pour spécifier le type de transition de l'animation.
4.animation-delay : utilisé pour spécifier le temps de retard nécessaire au début de l'exécution de l'animation.
5.animation-iteration-count : utilisé pour spécifier le nombre de répétitions de l'animation.
6.animation-direction : Utilisé pour spécifier si un mouvement inverse se produira dans la boucle d'animation.
7.animation-play-state : Spécifie si l'animation est en cours d'exécution ou en pause.
8.animation-fill-mode : Spécifie l'état en dehors du temps d'animation de l'objet.
Instructions spéciales :
1. Si plusieurs ensembles de valeurs d'attribut sont fournis, séparez-les par des virgules.
2. La fonctionnalité de script correspondante est l'animation.
Exemple de code :
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 5s infinite alternate;
-webkit-animation:theanimation 5s infinite alternate ;
-moz-animation:theanimation 5s infinite alternate ;
-o-animation:theanimation 5s infinite alternate ;
-ms-animation:theanimation 5s infinite alternate ;
}
@keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes theanimation{
0% {left:0px;}
100% {left:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus peut définir la valeur d'attribut gauche de l'élément div pour animer la transition de 0px à 200px, et peut répéter le cycle à l'infini et peut effectuer un mouvement inverse .
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:theanimation 4s infinite alternate;
-webkit-animation:theanimation 4s infinite alternate ;
-moz-animation:theanimation 4s infinite alternate ;
-o-animation:theanimation 4s infinite alternate ;
-ms-animation:theanimation 4s infinite alternate ;
}
@keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-moz-keyframes theanimation{
0% {top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-webkit-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
@-o-keyframes theanimation{
0%{top:0px;left:0px;background:red;}
25%{top:0px;left:100px;background:blue;}
50%{top:100px;left:100px;background:yellow;}
75%{top:100px;left:0px;background:green;}
100%{top:0px;left:0px;background:red;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus est plus compliqué que le premier Voici une introduction à son processus d'exécution.
1. La durée totale de toute l'animation est fixée à 4 secondes.
2.@keyframes définit quatre étapes d'animation. Définissez la valeur de l'attribut gauche de 0 à 100 px dans la période de 0 % à 25 % et convertissez la couleur d'arrière-plan du rouge au bleu, 25 % à 50 %, 50 %. -75 Il en va de même pour % et 75 %-100 %.
3. Et peut obtenir des effets de boucle infinie et de mouvement inverse.
<!DOCTYPE html>
<html>
<head>
<meta charset=" utf-8">
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<style type="text/css">
div{
width:100px;
height:100px;
background:red;
position:relative;
animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-webkit-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-moz-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-o-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
-ms-animation:firstanimation 5s infinite alternate,secondanimation 2s infinite alternate;
}
@keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-webkit-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-moz-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-o-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@-ms-keyframes firstanimation{
0% {left:0px;}
100% {left:200px;}
}
@keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-webkit-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-moz-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-o-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
@-ms-keyframes secondanimation{
0% {top:0px;}
100% {top:200px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>Le code ci-dessus définit plusieurs ensembles d'attributs d'animation pour les divs à la fois, séparés par des virgules.
![Projet front-end-Shangyou [Pratique complète de la technologie HTML/CSS/JS]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Cours frontal base zéro [Vue apprentissage avancé et application pratique]](https://img.php.cn/upload/course/000/000/068/63bbd15353895588.jpg)
![Tutoriel WEB front-end [HTML5+CSS3+JS]](https://img.php.cn/upload/course/000/000/068/63ba60c8da520536.jpg)
![Application pratique Apipost [api, interface, tests automatisés, mock]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
