Composer Plusieurs Animations
Nous pouvons utiliser la forme abrégée pour spécifier toutes les propriétés d'animation. La syntaxe est la suivante :
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Réécrivons brièvement les propriétés suivantes.
Méthode longue
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Méthode abrégée
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Cela semble complexe, et il est facile d'oublier une valeur. Cependant, cette possibilité existe.
Remarque
Pour le navigateur, il n'y a aucune différence entre la forme abrégée et la méthode longue pour spécifier l'animation.
Merci pour vos commentaires !
Demandez à l'IA
Demandez à l'IA
Posez n'importe quelle question ou essayez l'une des questions suggérées pour commencer notre discussion
Can you explain what each value in the shorthand means?
Are there any best practices for using the shorthand animation property?
What happens if I omit some values in the shorthand?
Awesome!
Completion rate improved to 2.04Composer Plusieurs Animations
Glissez pour afficher le menu
Nous pouvons utiliser la forme abrégée pour spécifier toutes les propriétés d'animation. La syntaxe est la suivante :
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Réécrivons brièvement les propriétés suivantes.
Méthode longue
animation-name: Rotation;
animation-duration: 5s;
animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
animation-delay: 100ms;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: backwards;
animation-play-state: running;
Méthode abrégée
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Cela semble complexe, et il est facile d'oublier une valeur. Cependant, cette possibilité existe.
Remarque
Pour le navigateur, il n'y a aucune différence entre la forme abrégée et la méthode longue pour spécifier l'animation.
Merci pour vos commentaires !
