ver2」に引き続き、本日もCSS3の記事です。Whale'という、CSSだけでTwitterのくじらを描いた猛者がいるという記事を目にしました。このくじらに触発されて今度はアニメーションに重点を置いたものを作ってみようと思い、実際に作ってみました。TweetShareHatenaLINEPocket今回作成したのは、とある魔術の禁書目録やとある科学の超電磁砲に度々出てくる風力発電+飛行船です。飛行船はchromeだけのおまけです。今回も使うものはHTML+CSS3だけで一切の画像やjavascriptは使いません。画像を使えば簡単にできるのは言うまでもないことですが、すべてソースコードから成り立つことが前提です。Beta12で閲覧してください。Beta12は羽の上にマウスを乗っけると動き出します。スペックの低いPCで閲覧するとアニメーションによってCPU使用率が急激に上がる恐れがあります。firefoxはアニメーションが動きませんが、それ以外ではきちんと表示することが出来ます。Opera、IE9では一部CSS3に対応してない部分があります。IE8以下はCSS3には全く対応していないので構造が崩れてひどいことになります。chromeを入れていない方はぜひこの機会に試してみてください。Chromeのダウンロード今回はアニメーションをやりたかったので、風力発電はアニメーションがメインに作ってあります。画像は一切使っていないので「とある魔術の禁書目録」のロゴも画像を使っていません。Hといったフォントが必要です。画像ではない証拠はhtmlとCSSのソースを確認してもらえば分かると思います。画像と違って右クリックで保存することができないってのも一つの特徴ですかね。どちらにしても、スクリーンショット撮られたら関係ないですけど。各ブラウザの動作アニメーションが動くのはChromeだけです。その他のブラウザはマウスを乗っけるとちょっと傾きます。Beta12以降です。Beta12は羽の上にマウスを乗っけると動き出します。その他のブラウザはマウスを乗っけるとちょっと傾きます。静止画として考えると、ChromeとFirefoxは完全に表示できています。RCはgradientが使えないのでグラデーションを加えられず、ちょっと薄っぺらな印象です。Operaに至っては背景のグラデーションがかからないので、文字まで見辛くなっています。最後はいつも通りオチ担当のIE7、8ですが、謎のミサイルが3つ飛んでいる状態ですね。意味がわからないです。おまけおまけとしてChromeだけ飛行船を飛ばしました。飛行船はアニメーションで移動します。これは記事公開前に思いつきで追加したものなのでそんなにしっかり作ってません。ChromeまたはSafariで閲覧してください。Chrome,Safari以外のブラウザではかなり崩れます。ChromeまたはSafari以外のブラウザではアニメーションが動きません。スペックの低いPCで閲覧するとアニメーションによってCPU使用率が急激に上がる恐れがあります。今まではブラウザの互換性を重視して、Chromeやfirefoxでは完全に見れるように作ってきましたが、今回のは互換性を維持できませんでした。Safari限定になってしまいます。Designの方で公開中です!興味のある人はぜひご覧ください。近々、もう一つのCSS3作品を公開予定です。今回のものは、CSSの行数で行ってもドラえもんより少ない500行でした。今回はアニメーションに重点をおいているため、簡単な題材でつくったので時間はそんなに掛かりませんでしたね。アニメーションという意味合いでは、gifアニメーション画像よりもきれいでファイルサイズを軽く出来るのでその点はメリットがあるように思えます。その代わりにどのブラウザでも使えるというわけではないので、CSS3をつかったアニメーションは一長一短ですね。ぶっちゃけ最近ではSVGとjavascriptでアニメーションしたほうが、もっと複雑なことが可能なのでそっちの方がいいかもしれません。今回のような回転するだけなら、CSS3を使うのもありかと・・・。回転させるのは画像の場合ですけどね。CSSはHTMLの装飾するためのもので、本来はこういった使い方をするものではないのですが、CSS3によってデザインの幅が広がったということは間違いない事実です。今回の技術デモでCSSでの新たなアイデアや知見が広がればと考えています。そんなこんなで今回の企画でCSS3の新たな可能性をみなさんに知っていただけたのなら幸いです。Tagとある禁書目録アニメCSSHtmlWebデザインわぶさんパソコンやスマホなどのガジェットに興味があり、大学で情報工学の勉強してシステムエンジニアに。ブログ歴は15年以上。スキルレベル4「情報セキュリティスペシャリスト」や「ネットワークスペシャリスト」などを取得。9の正式版を公開!ただし、日本語版は除く。23:499044Firefox3.6でも、ぎこちない(コマ送り)でアニメーションすることを確認しました。chromeの現行バージョン(9.0.597.107)では「禁書目録」の文字が上方へ数pxずれます。念のため、ご報告まで。00:019045↑firefoxってアニメーションしなくね?たぶんマウスを乗っけた時に少し回転するやつはアニメーションじゃないと思う。Beta12もぎこちないアニメーションしますね。私の環境ではIE9もFirefoxも文字がずれるけどフォントのせいでしょうか。00:389047字がずれるというのはtwitterでも報告が入っています。Hといったフォントが必要です。これが入ってないとずれてしまうようですね。firefox4でのずれはフォントの問題ではないようです。01:009048アンドロイドからですが、きちんとアニメーションまで完璧に動作しました。beta12以降でのアニメーション動作を追加しました。羽の上にマウスを乗っけると羽が回転し始めます。私はアンドロイド端末を持っていないので動作確認をしていないのですが、webkit系のブラウザならアニメーションまでしっかり動くと思います。01:559059回る向きが逆、って事は無いんですよね。07:499066firefox4でのズレを少し修正しました。RCって3.6.8と表示が全然違うのはなぜなんだろう。Ranking当ブログにリンクしてくださっているサイトの中でアクセス数の多いサイト上位15位が表示されます。