0

CSS3アニメーションを実現する「transition」

transition

transitonプロパティを使って、時間的な変化を付けることが出来ます。

変化する変化速度や開始のタイミング、また要する時間などをCSSのみで実現が可能です。
ただし、対応ブラウザの問題がありますので注意が必要です。

※IE8,9は対象外、iOS,Androidはベンダープレフィックス必須
(参考:Can I Use

 

■ 各プロパティ
transition-property 効果を付ける対象になるプロパティ名
transition-duration 変化にかける時間
transition-timing-function 変化の仕方を指定
transition-delay 変化をはじめるまでの時間

 

複数の指定をする場合には、値を記述する順番に注意してください。

「transition-property,transition-duration,transition-timing-function,transition-delay」の順番で指定するようにします。

単体で指定する場合等では、時間として指定される1番目の値は「transition-duration」として認識され、2番目に指定された値は「transition-delay」として認識します。

 

記述例)
transition: font-size 2s ease 1s;
(フォントサイズを1秒後に2秒間かけて開始と終了を滑らかに変化させる)

 

■ 初期値
transition-property none
transition-duration 0
transition-timing-function ease
transition-delay 0

 

■ transition-timing-functionの値

 一般的にイージングと呼ばれる速度変化の指定にはいくつかあります。

ease 開始と終了を滑らかに
linear 一定の速度で
ease-in 開始をゆっくり
ease-out 終了をゆっくり
ease-in-out 開始と終了をゆっくり

 

● 実際のサンプルを見てみます。

  1. 背景色と文字色を変化させる
  2. 景サイズと背景色を変化させる

 

1.背景色と文字色を変化させる場合

▼HTMLを記述

 ▼CSSを記述

 

デモサンプル1

 

2.背景色と背景サイズ、文字サイズを変化させる場合

▼HTMLを記述

  ▼CSSを記述

 

デモサンプル2

 

以上になります。




コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > CSS > CSS3アニメーションを実現する「transition」