Back to Top

entacl Lab. Webクリエイティブラボラトリー

Webクリエイティブラボラトリー

投稿日:    投稿者: 安部

CSS3アニメーションに触れてみる

CSS3アニメーションに触れてみる

普段CSSをさわる事はありませんが、CSS3アニメーションってどんなもんだろう?と触ってみたのでまとめてみました。
※webkit系のブラウザでご覧下さい。

何はともあれまずはCSS3

CSS3の代名詞(?)角丸
まずは円を作成してみようと思います。

          #sample1-radius {
              width:100px;
              height:100px;
              background-color:#FF0000;
              border-radius:50px
          }
          
          
日の丸ができました。
簡単ですw

ホバー状態の設定

ホバーで四角に
円にホバーすると四角になるようにしてみます。

          #sample2-radius {
              width:100px;
              height:100px;
              background-color:#FF0000;
              border-radius:50px
          }
          #sample2-radius:hover {
              width:100px;
              height:100px;
              background-color:#FF0000;
              border-radius:0px
          }
          
          
ホバーすると四角になりました。
簡単ですw

アニメーションの設定

ホバー時にアニメーションで四角に
やっとアニメーションの設定です。

          #sample3-radius {
              width:100px;
              height:100px;
              background-color:#FF0000;
              border-radius:50px;
              -webkit-transition: all 0.3s
          }
          #sample3-radius:hover {
              width:100px;
              height:100px;
              background-color:#FF0000;
              border-radius:0px
          }
          
          
たった1行「-webkit-transition: all 0.3s」を追加しただけで!!
こんなに簡単にアニメーションが設定できるのは素晴らしいですね〜!!

本来は「transition: all 0.3s」として設定できても良いところですが、CSS3が勧告されていないため、まだブラウザ依存が色濃く残っています。

現在、ベンダープレフィックスには下記のパターンがあります。
  • Chrome、Safari・・・「-webkit
  • InternetExplorer・・・「-ms
  • Firefox・・・「-moz
  • Opera・・・「-o
今回は「ホバーしたら」という制限付きの話ですが、「ページがロードされたタイミング」でアニメーションを開始するなどもできます。
(ただ、その場合はまだブラウザ依存があって・・)

これだけでも様々な場面で使用する事ができますが、CSS3とJavaScriptを組み合わせればもっと楽しいアニメーションも実現出来ます!!