CSS animation egenskab

Definition and usage

animation The property is a shorthand property used to set six animation properties:

Note:Always specify animation-duration If the duration is 0, the animation will not play.

See also:

CSS3 tutorial:CSS animation

HTML DOM reference manual:animation-egenskab

Eksempel

Brug af forkortet egenskab for at binde animation til div-elementet:

div
{
animation:mymove 5s infinite;
}

Prøv det selv

CSS-syntaks

animation: name duration timing-function delay iteration-count direction;
Værdi Beskrivelse
animation-name Definerer navnet på keyframe, der skal bindes til vælgeren.
animation-duration Definerer tiden det tager at fuldføre animationen, målt i sekunder eller millisekunder.
animation-timing-function Definerer animationens hastighedskurve.
animation-delay Definerer forsinkelsen før animationen starter.
animation-iteration-count Definerer antallet af gange animationen skal afspilles.
animation-direction Definerer om animationen skal afspilles i omvendt rækkefølge.
animation-fill-mode Definerer værdier, der anvendes uden for animationens køretid.
animation-play-state Definerer om animationen kører eller er暂停.

Tekniske detaljer

Standardværdi: none 0 ease 0 1 normal
Arv: no
Version: CSS3
JavaScript-syntaks: object.style.animation="mymove 5s infinite"

Browsere

Browserunderstøttelse

Tallene i tabellen viser den første browserversion, der understøtter egenskaben med præfikset -webkit-, -moz- eller -o-.

Chrome IE / Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
43.0
4.0 -webkit-		 10.0 16.0
5.0 -moz-		 9.0
4.0 -webkit-		 30.0
15.0 -webkit-
12.0 -o-