CSS3アニメーションをjavascriptで起動する

LINEで送る
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";

jQueryとIE7

LINEで送る
Pocket

本当に随分と久しぶりになりました。

今まではjsはあまりやらないようにしてたのですが、ちょっと将来的に必要になると思い、やることにしました。

・jsの読み込み順は基本的に、上から順に読み込むらしい。(HTML含めて)
 なので、headあたりにスクリプトを書いても、読み込みされていないタグを指定したりすると、動かないということがあります。

対処法としては
 ・onloadの中に記述する。
 ・操作対象のデータよりも下に記述する。

すごい当たり前な事とは思うのですけどね。

2008年1月24日20:02