Style animation-egenskapen
- Föregående sida alignSelf
- Nästa sida animationDelay
- Åter till föregående nivå HTML DOM Style objekt
Definition och användning
animation
Egenskapen är en förkortning av sex animationsegenskaper:
- animationName
- animationDuration
- animationTimingFunction
- animationDelay
- animationIterationCount
- animationDirection
Kommentar:Definiera alltid animationDuration-egenskapenAnnars är varaktigheten 0 och den spelas aldrig.
Exempel
Ändra animationen på <div>-elementet med förkortade egenskaper:
document.getElementById("myDIV").style.animation = "mynewmove 4s 2";
Syntax
Returnera animation-attribut:
object.style.animation
Ställ in animation-attribut:
object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"
Attributvärde
Värde | Beskrivning |
---|---|
animationName | Bestämmer namnet på de viktiga ramarna som ska bindas till väljaren. |
animationDuration | Bestämmer hur många sekunder eller millisekunder animationen tar att slutföra. |
animationTimingFunction | Bestämmer animationens hastighetskurva. |
animationDelay | Bestämmer fördröjningen innan animationen börjar. |
animationIterationCount | Bestämmer hur många gånger animationen ska spelas. |
animationDirection | Bestämmer om animationen ska spelas iblandningsslingor i motsatt riktning. |
animationFillMode | Bestämmer värdet som tillämpas utanför animationens exekveringstid. |
animationPlayState | bestämmer om animationen är igång eller pausad. |
initial | Sätt detta attribut till dess standardvärde. Se initial. |
inherit | Inheriterar detta attribut från föräldrelementet. Se inherit. |
Tekniska detaljer
Standardvärde: | none 0 ease 0 1 normal none running |
---|---|
Returvärde: | sträng som anger elementets animation-attribut. |
CSS-version: | CSS3 |
Webbläsarstöd
animation
är en CSS3 (1999)-funktion.
Alla webbläsare stöder det fullt ut:
Chrome | Edge | Firefox | Safari | Opera | IE |
---|---|---|---|---|---|
Chrome | Edge | Firefox | Safari | Opera | IE |
Stödjer | Stödjer | Stödjer | Stödjer | Stödjer | 11 |
Relaterade sidor
CSS-referenshandbok:animation-attribut
- Föregående sida alignSelf
- Nästa sida animationDelay
- Åter till föregående nivå HTML DOM Style objekt