Webやアプリのデザイントレンドを紹介。たまに雑談。

Browse By

[CSS] CSS Animations – CSSだけで描くアニメーション

  • Pocket
  • このエントリーをはてなブックマークに追加

CSSだけで描くアニメーション。デモページにはJSへのリンクがありますが、ここでアニメーションさせているのはCSSだけ。こんな事できるんですね。原理は簡単で、黒い四角を描画した上で、その上を透過PNGを使ってマスクをかけてます。んでマスクの方を回転させてるという仕組み。ただしこの記述でアニメーションできるのはWebkit環境のみ。GeckoとかIE環境で再現できないという点では、アニメーションの手段として現実的でないのは確か。けどCSS記述の内容とかを見ると、なんだかオラわくわくすっぞ、的なものを感じません? ちなみにこの記事の導入部分、なかなかオモろいです。作者の8年前の「CSS? なにそれおいしいの?」という時代の話について語られてます。テーブルレイアウトからこの時期にCSSレイアウトへと切り替えた世代にとっては懐かしい話です。

One thought on “[CSS] CSS Animations – CSSだけで描くアニメーション”

  1. Pingback: KSデザイン工房の日々 » Blog Archive » CSSの可能性!!
  2. Trackback: KSデザイン工房の日々 » Blog Archive » CSSの可能性!!

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください