Sammanställning av Flera Animationer
Vi kan använda den förkortade formen för att ange alla animationsegenskaper. Syntaxen är följande:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Låt oss skriva om följande egenskaper i korthet.
Lång väg
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;
Förkortad
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Det ser förvirrande ut, och det är lätt att missa något värde. Dock finns denna möjlighet.
Notera
För webbläsaren finns ingen skillnad mellan den förkortade och den långa metoden för att ange animationen.
Tack för dina kommentarer!
Fråga AI
Fråga AI
Fråga vad du vill eller prova någon av de föreslagna frågorna för att starta vårt samtal
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.04Sammanställning av Flera Animationer
Svep för att visa menyn
Vi kan använda den förkortade formen för att ange alla animationsegenskaper. Syntaxen är följande:
animation: <name> <duration> <timing_function> <delay> <iteration-count> <direction> <fill-mode> <play-state>
Låt oss skriva om följande egenskaper i korthet.
Lång väg
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;
Förkortad
animation: Rotation 5s cubic-bezier(0.075, 0.82, 0.165, 1) 100ms infinite alternate backwards running;
Det ser förvirrande ut, och det är lätt att missa något värde. Dock finns denna möjlighet.
Notera
För webbläsaren finns ingen skillnad mellan den förkortade och den långa metoden för att ange animationen.
Tack för dina kommentarer!
