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:
index.html
index.css
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:
index.html
index.css
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:
index.html
index.css
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.04
Definering af Animationens Varighed og Timing
Stryg for at vise menuen
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:
index.html
index.css
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:
index.html
index.css
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:
index.html
index.css
Tak for dine kommentarer!