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
Awesome!
Completion rate improved to 2.04Sammensæ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!
