animationstart-tapahtuma

Määritelmä ja käyttö

Kun CSS-animaatio alkaa toistua, animationstart-tapahtuma tapahtuu.

Jos haluat lisätietoja CSS-animaatioista, opiskele kurssimme CSS3-animaatio-opetusohjelma

Kun CSS-animaatio toistuu, voi tapahtua kolme tapahtumaa:

Esimerkki

Tee jotain <div>-elementille, kun CSS-animaatio alkaa:

var x = document.getElementById("myDIV");
// Chrome, Safari ja Opera:lle tarkoitettu koodi
x.addEventListener("webkitAnimationStart", myStartFunction);
// Standardinen kieli
x.addEventListener("animationstart", myStartFunction);

Kokeile itse

Kieli

objekti.addEventListener("webkitAnimationStart", myScript);  // Chrome, Safari ja Opera:lle tarkoitettu koodi
objekti.addEventListener("animationstart", myScript);        // Standardinen kieli

Kommentti:Internet Explorer 8 ja aikaisemmat versiot eivät tue addEventListener() -menetelmä

Tekninen yksityiskohta

Päihtymättömyys: Tuettu
Peruutettavissa: Ei tuettu
Tapahtumatyypit: AnimationEvent
DOM-versio: Taso 3 tapahtumat

Selaimen tuki

Taulukossa olevat luvut osoittavat ensimmäisen selaimen version, joka tukee tapahtumaa täysin.

Luvun jälkeinen "webkit" tai "moz" viittaa käyttöeettiseen ensimmäiseen versioon.

Tapahtuma Chrome IE Firefox Safari Opera
animationstart 4.0 webkit 10.0 16.0
5.0 moz
4.0 webkit 15.0 webkit
12.1

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

Liittyvät sivut

CSS opetusohjelma:CSS3-animaatio

CSS viittausoppikirja:CSS3 animation-ominaisuus

HTML DOM viittomakirja:Style animation-ominaisuus