Kombinieren Mehrerer Animationen
Wir können die Kurzschreibweise verwenden, um alle Animations-Eigenschaften anzugeben. Die Syntax lautet:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Im Folgenden fassen wir die nächsten Eigenschaften kurz zusammen.
Ausführliche Variante
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;
Kurzschreibweise
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Dies wirkt sehr unübersichtlich, und es ist leicht, einen Wert zu übersehen. Dennoch besteht diese Möglichkeit.
Hinweis
Für den Browser besteht kein Unterschied zwischen der Kurzschreibweise und der ausführlichen Variante zur Angabe der Animation.
Danke für Ihr Feedback!
Fragen Sie AI
Fragen Sie AI
Fragen Sie alles oder probieren Sie eine der vorgeschlagenen Fragen, um unser Gespräch zu beginnen
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.04Kombinieren Mehrerer Animationen
Swipe um das Menü anzuzeigen
Wir können die Kurzschreibweise verwenden, um alle Animations-Eigenschaften anzugeben. Die Syntax lautet:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Im Folgenden fassen wir die nächsten Eigenschaften kurz zusammen.
Ausführliche Variante
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;
Kurzschreibweise
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Dies wirkt sehr unübersichtlich, und es ist leicht, einen Wert zu übersehen. Dennoch besteht diese Möglichkeit.
Hinweis
Für den Browser besteht kein Unterschied zwischen der Kurzschreibweise und der ausführlichen Variante zur Angabe der Animation.
Danke für Ihr Feedback!
