ホームページ・Web制作
CSS3の知識・困った解決のページ
トランジションの効果をつける
トランジションの例
マウスカーソルを乗せるとサイズと色が変わります。
Sample
トランジションのコード
#sample {
padding: 2em;
background-color: #ffd800;
text-align: center;
-webkit-transition-property: background-color,padding;
-webkit-transition-duration: 5s;
transition-property: background-color,padding;
transition-duration: 5s;
}
#sample:hover {
padding: 10em;
background-color: #ffff33;
}
解説
トランジションはCSSの記述のみでスタイルに動きを与えます。
- transition-property
- 効果をつける対象のスタイルプロパティ
- transition-duration
- 効果の時間。この例では、5秒。
マウスを乗っけたときにトランジション効果を発生させたいので、hover疑似クラスに変化内容を記述します。
paddingの変化が、2em→10em となります。
background-colorの変化が、#ffd800→#ffff33 となります。
メモ
トランジションの開始を遅らせるderayというプロパティもあります。
作成日：