CSS3でお手軽にアニメーションが表現できる「transitionsプロパティ」※SafariかChromeで見てください

transitionプロパティは、指定した要素にアニメーション効果をつけることができる、CSS3で実装された機能の一つです。但し、このプロパティはwebkit系のブラウザ(Apple Safari, Google Chrome等)以外には、今のところまだ対応していません。

便利でお手軽に使えそうだったので、早速このブログでも使ってみました。上の画像にマウスオーバーさせてみてください。これがCSS3のtransitionsプロパティを使った効果の一つです。
※webkit系のブラウザ(Apple Safari, Google Chrome等)以外でご覧の場合は効果が見られません。

CSS3のtransitionプロパティについて

便利なんですが、やはり問題はブラウザです。IEはもちろんのこと、今のところはFirefoxにも対応していません。

対応ブラウザ

webkit系(Apple Safari, Google Chrome等)

使い方・指定方法

-webkit-transition-property: all;
どのプロパティにtransitionを適用させるかを指定します。

-webkit-transition-duration: 1s;
変化にかける時間を指定します。

-webkit-transition-timing-function: linear;
変化の仕方を指定します。(指定できる値は下記の通りです)

• default
  一定の速度で変化
• linear
  最初はゆっくりと変化して、最後になるにしたがって激しく変化
• ease-in
  最初は激しく、最後はゆっくりと変化
• ease-out
  ゆっくり始まり、途中で最高速となり、またゆっくりに戻る
• ease-in-out
  easeの効果をさらに強調
• cubic-bezier()
  数字を4つ、カンマ区切りで指定

-webkit-transition: all 1s linear;
このように、まとめて指定することもできます。

transitionプロパティの実用例

※webkit系のブラウザ(Apple Safari, Google Chrome等)以外でご覧の場合は効果が見られません。

文字を大きくする

.demo-01 {
-webkit-transition: 0.3s ease-in-out;
}

.demo-01:hover {
font-size: 60px;
}

文字の色を変える

.demo-02 {
-webkit-transition: 1s ease-in-out;
}

.demo-02:hover {
color: #FF0000;
}

文字に影をつける

.demo-03 {
-webkit-transition: 1s ease-in-out;
}

.demo-03:hover {
text-shadow: 10px 3px 15px #800000;
}

背景を変更する

.demo-04 {
background-color: #331C01;
-webkit-transition: background-color 1s linear;
}

.demo-04:hover {
background-color: #00704A;
}

画像を切り替える

.demo-05 img {
-webkit-transition: all 1s ease-in-out;
}

img.swap1, .demo-05 img.swap2 {
opacity: 1.0;
}

.demo-05:hover img.swap1, img.swap2 {
opacity: 0;
}

img.swap1 {
position: absolute;
}

ここまで使ってみましたが、他のプロパティとの組み合わせによっても、色々な表現ができそうです。ブラウザの問題もあるので、バシバシ使えそうにはないですが、勉強はしておきたいと思います。