Maison > Article > interface Web > A quoi sert l'attribut animation-duration ?

A quoi sert l'attribut animation-duration ?

青灯夜游original: 2019-01-31 10:47:535604parcourir

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 :

A quoi sert lattribut animation-duration ?

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!

php css3 animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment utiliser l'attribut animation-name en CSS3Article suivant：Comment utiliser l'attribut animation-name en CSS3

Articles Liés

Voir plus