Maison >interface Web >tutoriel CSS >Comment utiliser la propriété d'animation CSS3
Comment utiliser la propriété d'animation CSS3
- 青灯夜游original
- 2019-01-31 10:24:206974parcourir
La propriété d'animation CSS3 est une propriété abrégée qui permet d'obtenir des effets d'animation en définissant six propriétés d'animation. Ces six attributs sont le nom de l'animation, la durée de l'animation, la courbe de vitesse, le délai d'animation, les temps de lecture et si l'animation est jouée à l'envers.
propriété d'animation CSS3
Fonction : la propriété d'animation est Une propriété raccourcie pour définir six propriétés d'animation.
Syntaxe :
animation: name duration timing-function delay iteration-count direction;
Description : Les six attributs d'animation qui peuvent être définis par l'attribut animation sont :
Quantityweight animation-name : Spécifie le nom de l'image clé qui doit être lié au sélecteur.
Quantity animation-duration : Spécifie le temps nécessaire pour terminer l'animation, en secondes ou millisecondes.
● animation-timing-function : Spécifie la courbe de vitesse de l'animation.
Quantity animation-delay : Spécifie le délai avant le démarrage de l'animation.
● animation-iteration-count : Spécifie le nombre de fois que l'animation doit être jouée.
Quantity animation-direction : Spécifie si l'animation doit être jouée à l'envers à tour de rôle.
Remarque : L'attribut animation-duration doit toujours être défini, sinon lorsque la durée est 0, l'animation ne sera pas jouée.
Exemple d'utilisation de l'attribut d'animation CSS3
<!DOCTYPE html>
<html>
<head>
<style>
div
{
width:100px;
height:100px;
background:red;
position:relative;
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /*Safari and Chrome*/
}
@keyframes mymove
{
from {left:0px;}
to {left:200px;}
}
@-webkit-keyframes mymove /*Safari and Chrome*/
{
from {left:0px;}
to {left:200px;}
}
</style>
</head>
<body>
<p><strong>注释：</strong>Internet Explorer 9 以及更早的版本不支持 animation 属性。</p>
<div></div>
</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!