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:

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:

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: