CSS animation ominaisuus

Määrittely ja käyttö

animation Ominaisuus on lyhennetty ominaisuus, joka asettaa kuusi animaatioominaisuutta:

Huomautus:Olkaa aina määritellä: animation-duration Jos ei ole määritelty, kesto on 0, animaatio ei toimi.

CSS3 oppituntio:CSS animaatio

HTML DOM viittomääritys:animation-ominaisuus

Käytä lyhennettyä ominaisuutta sidottaaksesi animaation div-elementtiin:

div
{
animation:mymove 5s infinite;
}

animation: name duration timing-function delay iteration-count direction;

Arvo	Kuvaus
animation-name	Määrittää keyframe-nimen, joka on sidottu valitsimeen.
animation-duration	Määrittää, kuinka kauan animaatio kestää, sekunneissa tai millisekunneissa.
animation-timing-function	Määrittää animaation nopeuskaaren.
animation-delay	Määrittää viiveen ennen animaation alkua.
animation-iteration-count	Määrittää, kuinka monta kertaa animaatio tulisi näyttää.
animation-direction	Määrittää, tulisiko animaatio toistaa vaihtuvasti päinvastaisessa suunnassa.
animation-fill-mode	Määrittää arvon, joka sovelletaan animaation suoritusajasta ulos.
animation-play-state	Määrittää, onko animaatio käynnissä vai pysäytetty.

Oletusarvo:	none 0 ease 0 1 normal
Perintä:	ei
Versio:	CSS3
JavaScript-kieli:	object.style.animation="mymove 5s infinite"

Taulukossa olevat luvut osoittavat ensimmäisen version, jossa ominaisuus tuetaan täysin.

Luvut, jotka sisältävät -webkit-、-moz- tai -o- etuliitteen, viittaavat ensimmäiseen versioon, jossa etuliite on käytetty.

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-