animationiteration-tapahtuma

DOM tapahtumat AnimationEvent

Määrittely ja käyttö

animationiteration-tapahtuma tapahtuu toistuvissa CSS-animaatioissa.

Jos CSS animation-iteration-count-ominaisuusAsetettuna "1" tarkoittaa, että animaatio toistuu vain kerran, eikä animationiteration-tapahtumaa tapahdu. Animaation on toistuttava useita kertoja, jotta tapahtuma käynnistyy.

Jos haluat lisää tietoa CSS-animaatioista, tutki kurssiamme CSS3 Animaatiotutkimus.

Kun CSS-animaatio toistuu, saattaa tapahtua kolme tapahtumaa:

Esimerkki

Kun CSS-animaatio toistuu, tee jotain <div>-elementille:

var x = document.getElementById("myDIV");
// Chrome, Safari ja Opera -koodi
x.addEventListener("webkitAnimationIteration", myRepeatFunction);
// Standardikieli
x.addEventListener("animationiteration", myRepeatFunction);

Kokeile itse

Syntaksi

objekti.addEventListener("webkitAnimationIteration", myScript);  // Chrome, Safari ja Opera -koodi
objekti.addEventListener("animationiteration", myScript);        // Standardikieli

Huomautus:Internet Explorer 8 ja aikaisemmat versiot eivät tue addEventListener() metodi.

Tekninen yksityiskohta

Päihteessä: Tuetu
Peruutettavissa: Ei tuettu
Tapahtumatyypit: AnimationEvent
DOM versio: Taso 3 tapahtumat

Selaimen tuki

Taulukossa olevat numerot mainitsevat ensimmäisen selaimen version, joka tukee tapahtumaa täysin.

Luvun jälkeen "webkit" tai "moz" mainitsee ensimmäisen version, jota etuliite käytetään.

Tapahtumat Chrome IE Firefox Safari Opera
animationiteration 4.0 webkit 10.0 16.0
5.0 moz		 4.0 webkit 15.0 webkit
12.1

Huomautus:Chrome, Safari ja Opera käyttöön webkitAnimationEnd.

Liittyvät sivut

CSS opetusohjelma:CSS3 animaatio

CSS viittomikko:CSS3 animation ominaisuus

CSS viittomikko:CSS3 animation-iteration-count ominaisuus

HTML DOM viittomikko:Style animation-ominaisuus

DOM tapahtumat AnimationEvent