L'attribut animation-duration est utilisé pour définir le temps nécessaire à l'animation pour terminer un cycle, en secondes ou millisecondes ; lorsque la valeur est 0, cela signifie qu'il n'y a pas d'effet d'animation.
Propriété animation-durée CSS3
Fonction : Propriété animation-durée Définit le temps nécessaire à l'animation pour terminer un cycle, en secondes ou millisecondes.
Syntaxe :
animation-duration: time
time : Spécifie le temps nécessaire pour terminer l'animation. La valeur par défaut est 0, ce qui signifie aucun effet d'animation.
Remarque : Internet Explorer 9 et les versions antérieures ne prennent pas en charge l'attribut animation-duration.
Exemple d'utilisation de l'attribut CSS3 animation-duration
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove infinite;
animation-duration:2s;
/* Safari and Chrome */
-webkit-animation:mymove infinite;
-webkit-animation-duration:2s;
}
@keyframes mymove
{
from {top:0px;}
to {top:200px;}
}
@-webkit-keyframes mymove /* Safari and Chrome */
{
from {top:0px;}
to {top:200px;}
}
</style>
</head>
<body>
<p><strong>注：</strong>Internet Explorer 9 以及更早的版本不支持 animation-name 属性。</p>
<div></div>
<p><b>注：</b>始终规定 animation-duration 属性，否则时长为 0，就不会播放动画了。</p>
</body>
</html>Rendu :
Ce qui précède représente l'intégralité du contenu de cet article, j'espère qu'il sera utile à l'étude de chacun. Pour un contenu plus passionnant, vous pouvez prêter attention aux colonnes de didacticiels pertinentes du site Web PHP chinois ! ! !
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
