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;
}
ここまで使ってみましたが、他のプロパティとの組み合わせによっても、色々な表現ができそうです。ブラウザの問題もあるので、バシバシ使えそうにはないですが、勉強はしておきたいと思います。
コメントを残す