CSS3アニメーション(javascriptで制御) mmlemon Follow 2011-09-05 01:25:58 License: MIT License Fork0 Fav0 View2239 CSS3アニメーションをjavascriptで制御するサンプルです。 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 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> CSS3アニメーション(javascriptで制御) body { background-color: #000; font: 30px sans-serif; } #rect { background-color: #f00; width: 100px; height: 100px; } 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; } use an iframe compat browser, deer Play on jsdo.it games Share Embed QR Tag Download Complete! Description どんなゲームですか? CSS3アニメーションをjavascriptで制御するサンプルです。 Control Device スマートフォンコントローラー jsdo.it WebSocket Controller» マウス キーボード タッチデバイス Fullscreen 有効 無効 jsdo.it games から削除する Submit Tweet 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> css3 javascript, Tweet twitter Tags css3 javascript, Forked sort new page view favorite forked forked: CSS3アニメーション(javascript.. boolucks 00 20views 38/1/7 css3 javascript, forked: CSS3アニメーション(javascript.. zact1 00 19views 38/1/7 css3 javascript, forked: CSS3アニメーション(javascript.. zact1 00 14views 38/1/7 css3 javascript, forked: CSS3アニメーション(javascript.. koko1 00 41views 38/1/7 css3 javascript, 1 2NEXT>>