CSS3アニメーション（javascriptで制御）

mmlemon

2011-09-05 01:25:58

License: MIT License

Fork: 0

Fav: 0

View: 2239

Play
Stop
Reload

Fullscreen

Smart Phone

Readme
JavaScript 37 lines
HTML 1 lines
CSS 7 lines

CSS3アニメーションをjavascriptで制御するサンプルです。

CSS3アニメーション（javascriptで制御）

function onclicked()
{
    var kfname = "rectanimation";
    var keyframes = getKeyframes(kfname);
    insertKeyframe(keyframes);
    
    var tar = document.getElementById("rect");
    tar.style.webkitAnimationName = kfname;
    tar.style.webkitAnimationDuration = "1400ms";
    tar.style.webkitAnimationIterationCount = 100;
    tar.style.webkitAnimationTimingFunction = "ease-in-out";
}

function insertKeyframe(_kfstr)
{
    var last = document.styleSheets[document.styleSheets.length-1];
	last.insertRule(_kfstr, last.cssRules.length);
}

CSS3アニメーション（javascriptで制御）

CSS3アニメーションをjavascriptで制御するサンプルです。 function onclicked() { var kfname = "rectanimation"; var keyframes = getKeyframes(kfname); insertKeyframe(keyframes); var tar = document.getElementById("rect"); tar.style.webkitAnimationName = kfname; tar.style.webkitAnimationDuration = "1400ms"; tar.style.webkitAnimationIterationCount = 100; tar.style.webkitAnimationTimingFunction = "ease-in-out"; } function getKeyframes(_kfname) { var res = ""; res += "@-webkit-keyframes " + _kfname + " "; res += " { "; res += " 0%{ "; res += " -webkit-transform: translate(0px, 0px) scale(0.5); "; res += " } "; res += " 30%{ "; res += " -webkit-transform: translate(300px, 200px) scale(2); "; res += " } "; res += " 100%{ "; res += " -webkit-transform: translate(300px, 100px) scale(1.0);"; res += " } "; res += " } "; return res; } function insertKeyframe(_kfstr) { var last = document.styleSheets[document.styleSheets.length-1]; last.insertRule(_kfstr, last.cssRules.length); }<div id="rect" onclick="onclicked();"></div>body { background-color: #000; font: 30px sans-serif; } #rect { background-color: #f00; width: 100px; height: 100px; }

Play on jsdo.it games
Share
Embed
QR
Tag
Download

Complete!

Description どんなゲームですか？

Control Device

	スマートフォンコントローラー jsdo.it WebSocket Controller»
	マウス
	キーボード
	タッチデバイス

Fullscreen

有効
無効

jsdo.it games から削除する Submit

style

Design view
Code view

code

<script type="text/javascript" src="http://jsdo.it/blogparts/nRwX/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/mmlemon/nRwX" title="CSS3アニメーション（javascriptで制御）">CSS3アニメーション（javascriptで制御） - jsdo.it - share JavaScript, HTML5 and CSS</a></p>

QR Code