Tweet

Share on Tumblr

[`evernote` not found]

Pocket

時間が空いてしまいました。

さて、今回はCSS3アニメーションをjavascriptで設定、制御する例を残しておきます。
CSS3アニメーションはSafari（Windowsは未検証）、Mobile SafariではプロパティによってはGPUで動作するため、通常のアニメーションと比較すると非常に滑らかに動作します。

例えば矩形を動かしてみましょう。

css3アニメーションサンプル（webkit用） – jsdo.it – share JavaScript, HTML5 and CSS

idがrectであるdivをアニメーションさせています。

@-webkit-keyframes rectanimation
{
    0%{
	-webkit-transform: translate(0px, 0px) scale(0.5);
    }
    30%{
	-webkit-transform: translate(300px, 200px) scale(2);
    }
    100%{
	-webkit-transform: translate(300px, 100px) scale(1.0);
    }
}

#rect
{
    background-color: #f00;
    width: 100px;
    height: 100px;
    
    -webkit-animation-name: rectanimation;
    -webkit-animation-duration: 1400ms;
    -webkit-animation-iteration-count: 100;
    -webkit-animation-timing-funciton: ease-in-out;
}

では、これと同じコードをjsで書いてみましょう。せっかくなので、onclickでアニメーションを起動させてみましょう。
基本的には通常のcss->jsのルールと同様です。

CSS3アニメーション（javascriptで制御） – jsdo.it – share JavaScript, HTML5 and CSS

var tar = document.getElementById("rect");
    tar.style.webkitAnimationName = kfname;
    tar.style.webkitAnimationDuration = "1400ms";
    tar.style.webkitAnimationIterationCount = 100;
    tar.style.webkitAnimationTimingFunction = "ease-in-out";