firefox5のcss3 animationsがすごい件

firefox5がcss3 animationsに対応!

以前はwebkitしか対応していなかったcss3 animationsがfirefox5に対応したので、css3のバナーもfirefox5で動くようにしたよ。css3でアニメーションするバナー作ってみたを見てね。

で、firefox5なんだけど、webkitにはない実装が含まれてるみたい。

animationsが擬似要素にも適用できる。

これはちょっとすごい。

animationsの仕様には擬似要素の対応については書かれていないので、これはfirefox独自の実装なのかも。現にchromeでは、バージョン12の段階でanimationsの擬似要素対応はされてないんだ。

まあchromeは、transitionsの擬似要素にも対応してないんだけどね…( ´・ω・`)

今回はこのfirefox5のanimationsであそんで見るよ。

前回のバナーを修正してみる

前回の記事css3でアニメーションするバナー作ってみたの、二番目のサンプルを修正してみたよ。

ハートキャッチプリキュア! ←マウスオーバーでさらにアニメーション

今回はchromeでは、うまくマウスオーバーが動かないので、firefox5で見てね。

見た目はほとんど前回と変わってないと思うけど(ちょっと回転の軸が変だけど;)、前回はa要素の中に苦肉の策でimg要素を入れて、img要素でロゴを表示してたんだ。けど今回は、before擬似要素を使っているため、a要素のみで完結しているよ。

css3では背景画像を複数設定し、アニメーションさせることができるけど、背景画像は回転させることができない。だから前回は要素を追加することでごまかしていたんだけど、今回は擬似要素を回転させることで要素の追加を回避している。これで正真正銘のバナーと言えるかもしれない。

離れた場所でアニメーション

要素本体へhoverしたときに、離れたところにある擬似要素を動かせるのを利用してみた。下にあるスイッチにカーソルを合わせると、風車が回転しだすよ。(chromeだと何も表示されないよ)

押す

ボタンと風車本体と風車の羽が一つのdiv要素で書かれているよ。相変わらず回転軸がズレてるけどw

これは別に擬似要素使わないでも #hoge:hover .hogera みたいな子孫関係でもできるかも…←試せ

てなわけで

css3 animationsの擬似要素対応はもっと応用方法が考えられるかもしれないね。

またネタがあったら紹介できるといいな。

css3のアニメーションバナーを貼りつけてみた

前に作った( css3でアニメーションするバナー作ってみた )バナーを右に貼ってみた

Webブラウザがchromeなら見えてるはず。

やっぱり実際貼ってみると、バナーにしてはデカ過ぎ。

バナーの貼り方

まずはページのhead内とかに以下の一行を入れる。

次に、バナーを入れたいところに、以下の三行のうちから表示したいバナーに対応した一行を入れれば完成。

補足とかいろいろ

前のエントリで

firefox4のcss3に関する記事を上げるよとか言っときながら、また放置気味になっちゃった。今年中には書きたいな。

ところで、

このブログのcocos2dの記事はもうずいぶん昔に書いたんだけど、現在の仕様はいろいろ昔とは変わっちゃってるみたい。

それに関して、うちの記事cocos2dで最小のゲームを作るの修正方法を書いてくれている人がいたよ。

「cocos2dで最小のゲームを作る」をバージョンアップに合わせ修正

ありがとうございます。

この修正に関するエントリも去年の四月の記事なので、もし今のcocos2dではダメだったらゴメンナサイ。時間があったらこちらでも確認したいんだけど…

というか、一年近く前に修正記事書いてもらってるのに、紹介するの遅すぎだろ自分。(ふたたびゴメンナサイ…)

コメント

も、いくつかいただいてるにもかかわらず、全くレスポンス返せなくて、三度頭を下げる次第でございます…

cocos2dといえば、

日本の書籍でもcocos2dをけっこう詳しく扱っている書籍が出ているらしいね。なかなか読むチャンスがないので、いつか紹介できたらいいな。

autopagerizeでスクロールすると、

このブログに貼られているサンプルコードが見られなくなる不具合に今更気づいたw 対処方法わからないので、サンプルコードが見れなかった場合、パーマリンクから見てくださいな。

cocos2d目当てで来た人も

css3おもしろいからやろーぜー→css3でアニメーションするバナー作ってみた 宣伝乙。

ハートキャッチプリキュア!
記事検索
プロフィール

shukujitsu

  • ライブドアブログ