Style animation ominaisuus

Määrittely ja käyttö

animation Ominaisuus on kuuden animaatioominaisuuden lyhennys:

Huomioitavaa:Määritä aina animationDuration-ominaisuusMuussa tapauksessa animaation kesto on 0 ja sitä ei koskaan toisteta.

Esimerkki

Muuta <div>-elementin animaatiota lyhenteiden avulla:

document.getElementById("myDIV").style.animation = "mynewmove 4s 2";

Kokeile itse

Syntaksi

Palauta animation-ominaisuus:

object.style.animation

Aseta animation-ominaisuus:

object.style.animation = "name duration timingFunction delay iterationCount direction fillMode playState"

Ominaisuuden arvo

Arvo Kuvaus
animationName Määrittää, minkä nimellä olevat avainsilmät sidottaisiin valitsijoihin.
animationDuration Määrittää, kuinka paljon aikaa tai millisekuntia animaatio kestää.
animationTimingFunction Määrittää animaation nopeuskaavan.
animationDelay Määrittää, kuinka kauan animaatio viivästyy ennen kuin se alkaa.
animationIterationCount Määrittää, kuinka monta kertaa animaatio tulisi näyttää.
animationDirection Määrittää, toistetaanko animaatio vaihtuvassa toistossa päinvastaisessa suhteessa.
animationFillMode Määrittää arvon, joka sovelletaan animaation suoritusajasta ulkopuolella.
animationPlayState Määrittää, onko animaatio käynnissä vai keskeytetty.
initial Aseta tämä ominaisuus sen oletusarvon arvoon. Katso initial.
inherit Perii tämän ominaisuuden vanhemmalta elementiltä. Katso inherit.

Tekninen yksityiskohta

Oletusarvo: none 0 ease 0 1 normal none running
Palautusarvo: Merkkijono, joka ilmaisee elementin animation-ominaisuus.
CSS-versio: CSS3

Selaimen tuki

animation on CSS3 (1999) ominaisuus.

Kaikki selaimet tukevat täysin sitä:

Chrome Edge Firefox Safari Opera IE
Chrome Edge Firefox Safari Opera IE
Tuki Tuki Tuki Tuki Tuki 11

Liittyvät sivut

CSS-referenssikirja:animation-ominaisuus