2011/04/25
CSS3のアニメーションプロパティを動的生成するJavaScript
CSSのアニメーションプロパティでキーフレーム指定が面倒なので、動的に指定するJSを用意しました。
動作確認環境は、Chrome、Safari、MobileSafariです。
動作確認環境は、Chrome、Safari、MobileSafariです。
直接記述して指定する場合
マウスオーバーすることで、赤色から緑色に変わります。
直書きなので動的に色を変更（キーフレーム指定）するようなアニメーションは出来ません。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo-1</title>
<style>
div#demo1 {
width :50px;
height:50px;
border:1px solid #000000;
background-color: rgb(255,0,0);
}
div#demo1:hover {
-webkit-animation:anime-name 2s linear;
}
@-webkit-keyframes anime-name {
0% { background-color: rgb(255,0,0); }
100% { background-color: rgb(0,255,0); }
}
</style>
</head>
<body>
<div id="demo1"></div>
</body>
</html>
動的にJSから生成する場合
直描きするコードと同様に色を変更するサンプルです。
折角なので色の指定をランダムに指定します。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>demo-2</title>
<style>
div#demo2 {
width :50px;
height:50px;
border:1px solid #000000;
background-color: rgb(255,0,0);
}
</style>
<script src="jquery-1.5.2.min.js"></script>
<script src="dynamic-css.js"></script>
<script>
$( function(){
//初期化
DynamicCSS.initialize();
//CSSアニメーションルールを追加
DynamicCSS.appendKeyframes( "anime-name", {
"0%" :{ "background-color": "rgb(255,0,0)" },
"100%":{ "background-color": _rgb() }
} );
//CSSClassを追加
DynamicCSS.appendRule( ".anime-class", {
"-webkit-animation":"anime-name 1s ease-out"
} );
var $demo2 = $( "#demo2" );
$demo2.bind( "mouseover", function( event ){
$demo2.addClass( "anime-class" );
} )
.bind( "webkitAnimationEnd", function(){
$demo2.removeClass( "anime-class" );
} );
} );
function _rgb(){
var r = Math.floor( Math.random()*255 );
var g = Math.floor( Math.random()*255 );
var b = Math.floor( Math.random()*255 );
return "rgb("+r+","+g+","+b+");";
}
</script>
</head>
<body>
<div id="demo2"></div>
</body>
</html>
位置、大きさ、角度を動的に変更したい場合のキーフレームの指定方法は次のようにできます。
DynamicCSS.appendKeyframes( "anime-name", {
"0%" :{"-webkit-transform":"translate(0px,0px) rotate(0deg) scale(1.0);"},
"100%":{"-webkit-transform":"translate(100px,200px) rotate(300deg) scale(2.0);"}
} );
もしくは、
DynamicCSS.appendKeyframes( "anime-name", {
"0%" :DynamicCSS.transform(0,0,0,1.0),
"100%":DynamicCSS.transform(100,200,300,2.0)
} );
という指定でも動きます。
サンプルファイルをダウンロード