Google Chrome で CSS Animation して遊んでみた

今日はどこもかしこもGoogle Chromeの話題で持ち切りでしたね。

Chrome はあの Google が開発したブラウザーです。
早速使ってみましたが、噂に違わぬ爆速ぶりでデフォルトブラウザになる可能性も十分あるなと感じました。
さて、色々なレポートがすでに上がっている中、WebKitベースのブラウザーという事で自分が個人的に気になっている CSS Animation がちゃんと動くのか確認してみる事にしました。
※以降、ChromeかSafari3.1～で見ないと楽しくないですｗ

CSS Transform の確認

-webkit-transform を指定すると、回転や変形などかなりダイナミックなスタイルが実現できます。
下のボタンを色々押すとyagerアイコンが変化します。

各ボタンに仕掛けてあるJavaScriptはこんな感じです。

// 初期化
document.getElementById('css_animation_test').style.webkitTransform='none';
// 拡大
document.getElementById('css_animation_test').style.webkitTransform='scale(2)';
// 90度回転
document.getElementById('css_animation_test').style.webkitTransform='rotate(90deg)';
// 右下に100pxずつ移動
document.getElementById('css_animation_test').style.webkitTransform='translate(100px,100px)';
// ゆがみ
document.getElementById('css_animation_test').style.webkitTransform='skew(10deg,-10deg)';
// 組み合わせ
document.getElementById('css_animation_test').style.webkitTransform='matrix(1,1,0,1,0,0)';

参考：Surfin’ Safari – Blog Archive » CSS Transforms

CSS Animation の確認

-webkit-transition を指定すると、スタイルが変化する場合のタイミングやスピードを指定することができます。

各要素に指定しているCSSは以下の通り（hoverセレクター使ってます）

#transition_test1 {
border:1px solid #CCCCCC;
color:#ffffff;
background-color:#0000ff;
-webkit-transition:background-color 2s linear;
}
#transition_test1:hover {
background-color:#ff0000;
}
#transition_test2 {
border:1px solid #CCCCCC;
color:#ffffff;
background-color:#000000;
-webkit-transition:all 2s ease-in;
}
#transition_test2:hover {
border:10px solid #CCCCCC;
}
#transition_test3 {
border:1px solid #CCCCCC;
color:#ffffff;
background-color:#000000;
-webkit-transition:all 2s linear;
height:30px;
}
#transition_test3:hover {
height:100px;
}
#transition_test4 {
border:1px solid #CCCCCC;
color:#ffffff;
background-color:#000000;
-webkit-transition:-webkit-transform 2s linear;
}

まとめ

まあ、Safariと同じだから使えて当然なんだけど、やっぱり面白いですね。
とはいえ、あまりにもダイナミックなアニメーションはユーザに優しくないので使いどころは要検討です。

関連エントリー

・Safariでページを大回転させるブックマークレット