Notice: This page requires JavaScript to function properly.
Please enable JavaScript in your browser settings or update your browser.
Lære Definering af Animationens Varighed og Timing | Avancerede CSS-animationer
Avancerede CSS-teknikker

bookDefinering 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Vi kan angive tidsforsinkelsen for, hvornår animationen starter, varigheden for hvor længe animationen kører, samt animationens forløb over tid.

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 2

Spørg AI

expand

Spørg AI

ChatGPT

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

bookDefinering 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.html

index.css

index.css

copy

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.html

index.css

index.css

copy

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.html

index.css

index.css

copy
question mark

Vi kan angive tidsforsinkelsen for, hvornår animationen starter, varigheden for hvor længe animationen kører, samt animationens forløb over tid.

Select the correct answer

Var alt klart?

Hvordan kan vi forbedre det?

Tak for dine kommentarer!

Sektion 4. Kapitel 2
some-alt