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;
}

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