Creazy!

WEBエンジニア・ヤガーのテック・ガジェットブログ

技術情報

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でページを大回転させるブックマークレット

-技術情報

執筆者:


  1. あったくん より:

    MP4TubeRSS(http://labs.creazy.net/mp4tube/)のバージョンアップお願いします。
    ・完全日本語検索対応
    ・Dailymotion GUBA ニコニコ動画 Veoh Google Video youku.com AdultSatellites MoroTubeにも対応してほしい。
    ・PSPブラウザーからもっと簡単DL可能にしてほしい。
    ・RSS強化

  2. ごてん より:

    自分もお願いします、ようつべのみだと楽しみが増えないのでw
    ・上記以外にもsonyのmylo PS3 appleのiPod  touch&iPhone microsoftのWindows Mobile 任天堂のWiiに対応してもらいたいです。
    ・アダルト動画共有サイト(YourFileHost 裏アゲサゲ アダルトファイルマン badjojo Badongo Beasttube MEGAROTIC PornoTube PornHub.com pornhost.com RedTube YouPorn.com Tube8)にも対応してほしいです。
    ・動画検索後の「次へ」の表示追加。
    ・MP4(H.264)AVCにも対応。
    ・検索ボックスにクエリの候補を表示する。(結果履歴)
    ・検索結果の表示件数を100件まで増やす。
    ・検索キーワードの表示記憶機能の追加。
    ・人気キーワードランキングの表示。

comment

メールアドレスが公開されることはありません。

関連記事

ミクシィ【毎月1冊無料】のフォトブック「nohana」が届いたので早速レポート

先日作成したフォトブック「nohana」が先ほど手元に届きましたので、早速仕上がりをチェックしたいと思います。 ・nohana(ノハナ) | 毎月1冊無料で手に入るフォトブック

古いREGZA液晶テレビと、古いMacBookでホームサーバーを作るシリーズ #古REGZA古MacBook

最近は新しいガジェットを買うお金が無いこともあり、多少古い機械でももっているものは有効利用したいなぁと考えているヤガーです。で、前から考えていてこのところちょこちょこ進めているのが、表題の通りホームサ …

新型MacBook(Late 2008) が届いたよ!

待ちに待ったMacBookが会社に届きました! いやー、もう嬉しい!!! とりあえず、何も設定できていませんが開封レポートまでのっけちゃいます。 (携帯カメラで撮影なので画質とかはご容赦下さい。)

no image

Amazon ウィジェット なるものを早速試してみました

Amazon ウィジェットを使うと、ブログをはじめとしたWebサイトでの商品紹介がもっと簡単に、ダイナミックになります。もちろん利用は無料です。 via: Amazon アソシエイト・プログラム ブロ …

no image

ブログバトラーが面白い

Flashでできてる、いわゆるブログパーツってやつだけど、これは面白い。実際他のバトラーと戦う事ができる。HP/MPみたいなのや各種ステータスの設定、RSSから読み込んだ文章を解析して魔法なんかの設定 …

スポンサードリンク

スポンサードリンク