Animation
#animation
Click!
animationstart
CSSのアニメーションが始まったとき。
document.getElementById('animation').addEventListener('animationstart', function(e) {
console.log(e)
})
animationiteration
CSSのアニメーションに繰り返しが設定されていて、区切りが訪れるたびに。
document.getElementById('animation').addEventListener('animationiteration', function(e) {
console.log(e)
})
animationend
CSSのアニメーションが終わったとき。
document.getElementById('animation').addEventListener('animationend', function(e) {
console.log(e)
})
AnimationEvent
CSSアニメーションのイベントのインターフェースです。
/*=== よく使うプロパティ ===*/
// アニメーション名
console.log(e.animationName )
// アニメーションが走った時間
console.log(e.elapsedTime)
Transition
#transition
Hover!
transitionend
CSSのトランジションが終わったとき。
document.getElementById('transition').addEventListener('transitionend', function(e) {
console.log(e)
})
その他のイベント
アニメーション関連のイベントには、transitionstartやanimationcancelなどもありますが、サポートしているブラウザが少ないため、コードは載せていません。使用する際はブラウザのサポートを確認したほうが良いと思います。
TransitionEvent
CSSトランジションのイベントのインターフェースです。
/*=== よく使うプロパティ ===*/
// トランジションに関連したCSSプロパティ名
console.log(e.propertyName)
// トランジションが走った時間
console.log(e.elapsedTime)