Comment utiliser la propriété d'animation CSS3-tutoriel CSS-php.cn

Comment utiliser la propriété d'animation CSS3

青灯夜游

Libérer： 2019-05-25 11:27:34

original

6973 Les gens l'ont consulté

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.

Comment utiliser la propriété d'animation CSS3

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;

Copier après la connexion

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>

Copier après la connexion

Rendu :

Comment utiliser la propriété danimation CSS3

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!