Explication détaillée de l'attribut animation-duration de CSS3 :
Cet attribut est utilisé pour définir la durée de transition de l'animation.
Pour plus d'informations sur l'attribut animation, veuillez vous référer à l'explication détaillée de l'utilisation de l'attribut animation en CSS3.
Structure grammaticale :
animation-duration:<time> [ ,<time>]*
Analyse des paramètres :
time : Spécifie la durée d'exécution de l'animation, l'unité est la seconde (s).
Remarque spéciale :
Si plusieurs valeurs d'attribut sont fournies, séparez-les par des virgules.
La fonctionnalité de script correspondante est animationDuration.
Exemple de code :
Exemple 1 :
<!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 infinite alternate; -webkit-animation:theanimation infinite alternate ; -moz-animation:theanimation infinite alternate ; -o-animation:theanimation infinite alternate ; -ms-animation:theanimation infinite alternate ; -webkit-animation-duration:8s; -moz-animation-duration:8s; -o-animation-duration:8s; -ms-animation-duration:8s; animation-duration:8s; } @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 définit la durée de l'animation à 8 secondes.
Exemple 2 :
<!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 infinite alternate,secondanimation infinite alternate; -webkit-animation:firstanimation infinite alternate,secondanimation infinite alternate; -moz-animation:firstanimation infinite alternate,secondanimation infinite alternate; -o-animation:firstanimation infinite alternate,secondanimation infinite alternate; -ms-animation:firstanimation infinite alternate,secondanimation infinite alternate; -webkit-animation-duration:5s,2s; -moz-animation-duration:5s,2s; -o-animation-duration:5s,2s; -ms-animation-duration:5s,2s; animation-duration:5s,2s; } @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 utilise animation-duration pour spécifier respectivement deux durées d'animation pour deux animations.