Maison > interface Web > tutoriel CSS > Qu'est-ce que l'animation en CSS

Qu'est-ce que l'animation en CSS

王林
Libérer: 2020-11-30 15:12:55
original
6052 Les gens l'ont consulté

L'animation en CSS est un attribut abrégé, utilisé pour définir des attributs d'animation, tels que [animation-duration], qui spécifie le temps nécessaire pour terminer l'animation. Cet attribut doit être spécifié, sinon la durée de l'animation le sera. être 0 et ne peut pas être joué.

Qu'est-ce que l'animation en CSS

L'environnement d'exploitation de ce tutoriel : Système Windows 10, CSS3, cet article est applicable à toutes les marques d'ordinateurs. L'attribut

animation est un attribut raccourci utilisé pour définir six attributs d'animation :

(Recommandation vidéo d'apprentissage : tutoriel vidéo CSS)

animation-name
animation-duration
animation-timing-function
animation-delay
animation-iteration-count
animation-direction
Copier après la connexion

Commentaire : Veuillez toujours spécifier l'attribut animation-duration, sinon la durée sera de 0 et l'animation ne sera pas jouée.

Syntaxe :

animation: name duration timing-function delay iteration-count direction;
Copier après la connexion

animation-name spécifie le nom de l'image clé qui doit être lié au sélecteur. .

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.

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.

animation-direction précise si l'animation doit être jouée à l'envers à tour de rôle.

Exemple :

Utiliser des attributs abrégés pour lier l'animation aux éléments div :

div
{
animation:mymove 5s infinite;
-webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}
Copier après la connexion

Recommandations associées : Tutoriel CSS

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal