8 propriétés de l'animation CSS3 (Animation) que vous devez maîtriser

Attribut composite d'animation. Récupère ou définit les effets d’animation appliqués à l’objet.

S'il y a plusieurs valeurs d'attribut séparées par ",", cela s'applique à tous les éléments, y compris les pseudo-objets :after et :before

1.animation-name Récupère ou définit le nom de l'animation appliqué à l'objet

Doit être utilisé conjointement avec la règle @keyframes, par exemple:@keyframes animations animation-name:animations;

2.animation-duration Récupérer ou définir la durée de l'animation de l'objet

animation- durée:3s;Animation terminée Le temps utilisé est de 3s

3. animation-timing-function Récupère ou définit le type de transition de l'animation de l'objet

linéaire : transition linéaire. Equivalent à la courbe de Bézier (0.0, 0.0, 1.0, 1.0)

facilité : transition en douceur. Equivalent à la courbe de Bézier (0,25, 0,1, 0,25, 1,0)

facilité d'entrée : de lent à rapide. Equivalent à la courbe de Bézier (0,42, 0, 1,0, 1,0)

accélération : de rapide à lent. Equivalent à la courbe de Bézier (0, 0, 0,58, 1,0)

facilité d'entrée-sortie : de lent à rapide puis à ralentir. Équivalent à la courbe de Bézier (0,42, 0, 0,58, 1,0)

step-start : équivalent aux étapes (1, début)

étape-end : équivalent aux étapes (1, fin)

steps(<integer>[, [ start | end ] ]?) : Une fonction step qui accepte deux paramètres. Le premier paramètre doit être un entier positif précisant le nombre d'étapes de la fonction. La valeur du deuxième paramètre peut être start ou end, spécifiant le moment où la valeur de chaque étape change. Le deuxième paramètre est facultatif et la valeur par défaut est end.

cubic-bezier(, , , ) : Un type de courbe de Bézier spécifique, les 4 valeurs doivent être dans le [0, 1 ] interval Within

4.animation-delay Récupérer ou définir le temps de retard de l'animation de l'objet

animation-delay:0.5s Le temps de retard avant le début de l'animation est de 0,5. s

5.animation-iteration-count Récupère ou définit la boucle instants d'animation d'objet

animation -iteration-count : nombre infini ;

infini : boucle infinie

nombre : nombre de boucles

6.animation-direction Récupérer ou définir l'animation de l'objet dans S'il faut se déplacer dans la direction opposée dans la boucle

normal : direction normale

inverse : courir dans le sens inverse

alternatif : l'animation s'exécute normalement puis dans le sens opposé, et continue à alterner Exécuter

alterné-inverse : L'animation s'exécute d'abord dans le sens inverse puis s'exécute dans le sens avant, et continue à s'exécuter en alternance

7. animation-play-state Récupérer ou définir l'état de l'objet animation

animation-play-state:running | paused;

running: motion

paused: paused

animation-play-state:paused; Lorsque la souris L'animation s'arrête au passage, et l'animation continue lorsque la souris s'éloigne

8. animation-fill-mode Récupérer ou définir l'état en dehors du temps d'animation de l'objet

none : valeur par défaut, ne pas définir l'état de l'objet en dehors de l'animation

forwards : set l'état de l'objet à l'état à la fin de l'animation

à l'envers : définissez l'état de l'objet à l'état au début de l'animation

les deux : définissez l'état de l'objet à l'état lorsque le l'animation commence ou se termine

[Recommandations associées]

1 Présentation détaillée de l'attribut animation-direction dans CSS3

2. Partager un exemple de surveillance de l'événement de fin d'animation CSS3

3 Utilisez l'attribut d'animation pour implémenter une exécution retardée entre les boucles

4 Explication détaillée des deux. méthodes pause (transition, animation) en CSS3

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!