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

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

Google Chrome

Chrome はあの Google が開発したブラウザーです。
早速使ってみましたが、噂に違わぬ爆速ぶりでデフォルトブラウザになる可能性も十分あるなと感じました。

さて、色々なレポートがすでに上がっている中、WebKitベースのブラウザーという事で自分が個人的に気になっている CSS Animation がちゃんと動くのか確認してみる事にしました。

※以降、ChromeかSafari3.1~で見ないと楽しくないですw

CSS Transform の確認

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

yager icon

各ボタンに仕掛けてある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 を指定すると、スタイルが変化する場合のタイミングやスピードを指定することができます。

transition_test1: mouseoverで背景色が青から赤に変わります

transition_test2: mouseoverで線が太くなります

transition_test3: mouseoverで高くなります

transition_test4: クリックすると360度回転します
各要素に指定している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でページを大回転させるブックマークレット

同じカテゴリーの記事

このページの一番上に戻る
  • Facebook
  • Twitter
  • Tumblr
  • Instagram
  • miil