Definering af Animationens Varighed og Timing

Lad os overveje alle mulige måder at arbejde med animationstid på.

animation-duration egenskab

animation-duration angiver den tid, der kræves for, at en animation fuldfører én cyklus (ændring fra start- til sluttilstand), målt i enten sekunder (s) eller millisekunder (ms).

animation-duration: 3s | 3000ms

Kør følgende eksempel og hold musen over boksen:

animation-timing-function egenskab

animation-timing-function bestemmer, hvordan animationen udvikler sig over tid, og styrer animationens acceleration og deceleration. animation-timing-function kan have de samme værdier som egenskaben transition-timing-function. Flere foruddefinerede timing-funktioner er tilgængelige, såsom linear, ease og ease-in-out, eller der kan defineres en brugerdefineret kubisk bezier-kurve ved hjælp af funktionen cubic-bezier().

animation-timing-function: time_function

Anvend forskellige time_functions på boksene i eksemplet:

animation-delay egenskab

animation-delay angiver den tid, der skal gå, før animationen starter. Den kan angives i sekunder (s) eller millisekunder (ms).

animation-delay: 0.1s | 100ms

Forskellige forsinkelser anvendes på boksene i eksemplet: