Definiera Animationens Varaktighet och Timing
Låt oss överväga alla möjliga sätt att arbeta med animationstid.
animation-duration-egenskapen
animation-duration anger tiden som krävs för att en animation ska slutföra en cykel (ändring från initialt till slutligt tillstånd), mätt i antingen sekunder (s) eller millisekunder (ms).
animation-duration: 3s | 3000ms
Kör följande exempel och hovra över rutan:
index.html
index.css
animation-timing-function-egenskapen
animation-timing-function bestämmer hur animationen fortskrider över tid och styr animationens acceleration och inbromsning. animation-timing-function kan ha samma värden som egenskapen transition-timing-function. Flera fördefinierade timingfunktioner finns tillgängliga, såsom linear, ease och ease-in-out, eller så kan vi definiera en anpassad kubisk bezierkurva med funktionen cubic-bezier().
animation-timing-function: time_function
Applicera olika time_functions på rutorna i exemplet:
index.html
index.css
animation-delay-egenskapen
animation-delay anger den tid som ska förflyta innan en animation startar. Den kan anges i sekunder (s) eller millisekunder (ms).
animation-delay: 0.1s | 100ms
Olika fördröjningar tillämpas på rutorna i exemplet:
index.html
index.css
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
Awesome!
Completion rate improved to 2.04Definiera Animationens Varaktighet och Timing
Svep för att visa menyn
Låt oss överväga alla möjliga sätt att arbeta med animationstid.
animation-duration-egenskapen
animation-duration anger tiden som krävs för att en animation ska slutföra en cykel (ändring från initialt till slutligt tillstånd), mätt i antingen sekunder (s) eller millisekunder (ms).
animation-duration: 3s | 3000ms
Kör följande exempel och hovra över rutan:
index.html
index.css
animation-timing-function-egenskapen
animation-timing-function bestämmer hur animationen fortskrider över tid och styr animationens acceleration och inbromsning. animation-timing-function kan ha samma värden som egenskapen transition-timing-function. Flera fördefinierade timingfunktioner finns tillgängliga, såsom linear, ease och ease-in-out, eller så kan vi definiera en anpassad kubisk bezierkurva med funktionen cubic-bezier().
animation-timing-function: time_function
Applicera olika time_functions på rutorna i exemplet:
index.html
index.css
animation-delay-egenskapen
animation-delay anger den tid som ska förflyta innan en animation startar. Den kan anges i sekunder (s) eller millisekunder (ms).
animation-delay: 0.1s | 100ms
Olika fördröjningar tillämpas på rutorna i exemplet:
index.html
index.css
Tack för dina kommentarer!
