2012年02月12日

keyframesをJavaScriptで制御

createElementでstyle要素を作成することでkeyframesのアニメーションをJavaScriptで動的に生成できる。

var main01main = [
"0% {left:100px}",
"50% {left:200px}",
"100% {left:300px}"
];
var cssAnimation = document.createElement('style');
cssAnimation.type = 'text/css';
var rules = document.createTextNode('@-webkit-keyframes main01main {'+
main01main.join(" ")+
'}');
cssAnimation.appendChild(rules);
document.getElementsByTagName("head")[0].appendChild(cssAnimation);


posted by ねこまんま at 01:34 | Comment(0) | TrackBack(0) | テクニック | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。