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:
- animationstart - Kun CSS-animaatio alkaa
- animationiteration - Kun CSS-animaatio toistuu
- animationend - Kun CSS-animaatio suoritetaan loppuun
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);
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