tomo.mobi

Representation design of material


CSS3 Transform アニメーション callback

今日はとても勉強になる事を知る事が出来ました。
変形処理を行う transform プロパティを使ったアニメーションのcallbackです。

「CSS Transitions」
http://www.w3.org/TR/css3-transitions/

【引用】「HTMLリファレンス:http://www.htmq.com/css3/animation-delay.shtml」

[CSS]
div#sample {
animation-name: anime1;
animation-duration: 5s;
animation-timing-function: ease;
animation-iteration-count: infinite;
animation-delay: -2s;
}

@keyframes anime1 {
0% {width: 50px; height: 50px; background-color: aqua;}
100% {width: 200px; height: 50px; background-color: blue;}
}

[HTML]


animation効果のサンプル


上記のコールバックは以下のようにして取得できます(?)

var element = document.getElementById(“sample”);
element.addEventListener(“webkitAnimationEnd”, function(e){
e.currentTarget.removeEventListener(“webkitAnimationEnd”, arguments.callee, false);
alert(“webkitAnimationEnd”);
}, false);
element.className = “anime1”;

関数を参照する、Argumentsクラスのcalleeプロパティを使うそうです。

すばらしぃー
おぉぉおぉ。。。。