CSS3のみでのアニメーションについて(4/4) – css3を触ってみて思った4個の利点

add to hatena hatena.comment
1
add to del.icio.us
0
add to livedoor.clip
1
add to Yahoo!Bookmark
0
Total:
2

CSS, 備忘録

css3を触ってみて思った利点の3個目

この記事は、画像無しでリッチな表現(3/4) – css3を触ってみて思った4個の利点の続きです。
とりあえずcss3のみで動かしている例を動画にて。

実際のサンプルや、アニメーションについての詳細は続きから。

上の動画の実際のデモ

下の灰色線の中にマウスカーソルを合わせてみてください。

zuma

これがCSS3のみで動かしているデモとなっています。
確認できる環境は下の環境になるので、ブラウザによってはデモは動きません。

CSS3アニメーションが動く環境

2009年12月24日現在だと、Webkit系である、Chrome4・Safari4などで動作確認が取れています。
その他のブラウザはまだ実装されていません。
※Mozilla系は拡大縮小などの変形は出来ますが、アニメーションまではまだ対応していません。

ではアニメーションさせるために必要なプロパティなどは次ページ以降から説明します。

Pages: 1 2

2件のコメント »

  1. 記事書きましたっ。iPhoneでも動くよ! CSS3のみでのアニメーションについて(4/4) – css3を触ってみて思った 4個の利点 | kzms2 – html,css,javascript http://bit.ly/8TbUtY

    トラックバック by ずま/Zuma — 2009/12/24 木曜日 @ 0:56:03

  2. 記事書きましたっ。iPhoneでも動くよ! CSS3のみでのアニメーションについて(4/4) – css3を触ってみて思った 4個の利点 | kzms2 – html,css,javascript http://bit.ly/8TbUtY

    トラックバック by kzms2 — 2009/12/24 木曜日 @ 0:56:03

コメントを入力

コメント欄

Available Feeds

ブログ内検索

最近の活動

イベント

Dreamweaver Town Meeting in Tokyo

Dreamweaver Town Meeting in Tokyoに出演しました。

書籍

続・ハイパフォーマンスWebサイト ―ウェブ高速化のベストプラクティス (大型本)

付録を書かせていただきました。

Profile

ずま/Zuma
Zuma
TwitterはてなブックマークTumblrFriendFeedGoogle リーダー
  • CSS3でのアニメーション知りたい方参考にどでしょ。「:hover」の応用なので古いブラウザでもそれなりに動きます。 Animated Sprites with CSS3 Transitions http://bit.ly/brpjRZ

    September 8, 2010, 5:54 am
  • RT @cipher: New post: CSS Nite in SENDAI, Vol.5でお会いしましょう - http://bit.ly/a8NkPr

    September 7, 2010, 5:26 am
  • おはよござます。ネムネムの実の能力者

    September 7, 2010, 1:45 am

某ポータルWebデザイナー。世間的にはマークアップな人。 html,css,javascript大好き。最近はcss3がお気に入り。phpとasも気になるお年頃。僕はどこへ向かうのか。dot3というユニットでも活動中。http://dot3.jp [tag]iPhone,music,design,wordpress

アーカイブ