Sammensætning af Flere Animationer
Vi kan bruge shorthand-formen til at angive alle animations-egenskaber. Syntaksen er følgende:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Lad os omskrive de følgende egenskaber kort.
Lang metode
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;
shorthand
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Det kan virke forvirrende, og det er let at overse en værdi. Dog har vi denne mulighed.
Bemærk
For browseren er der ingen forskel mellem shorthand og den lange metode til at angive animationen.
Tak for dine kommentarer!
Spørg AI
Spørg AI
Spørg om hvad som helst eller prøv et af de foreslåede spørgsmål for at starte vores chat
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.08Sammensætning af Flere Animationer
Stryg for at vise menuen
Vi kan bruge shorthand-formen til at angive alle animations-egenskaber. Syntaksen er følgende:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Lad os omskrive de følgende egenskaber kort.
Lang metode
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;
shorthand
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Det kan virke forvirrende, og det er let at overse en værdi. Dog har vi denne mulighed.
Bemærk
For browseren er der ingen forskel mellem shorthand og den lange metode til at angive animationen.
Tak for dine kommentarer!
