web017 transitionプロパティ(時間的変化の過程)

transitionプロパティ(時間的変化の過程)

主に:hover時の動きに時間的変化をつける。

■ポイント
・ショートハンドである。
・各プロパティのざっくり説明
　transition-property：どこを（背景色を）
　transition-duration：どれくらい（1.5秒位で）
　transition-timing-function：どのように。
　transition-delay：あまり使用しない?

・transition-timing-function
　一定っぽい→linear
　後ではやく→ease-in
　最初はやく→ease-out

■コード
css

/* html
<div class="sample"></div> 
*/

.sample {
  background-color:#222;
  width:100px;
  height:100px; 

  transition:
  background-color 2s linear,
  width 3s linear, 
  height 1s linear
  ;
}
.sample:hover{
  background-color: #ccc;
  width: 200px;
  height:200px;
}

参考：
transition－CSS3リファレンス
CSS3 アニメーション（Transitions）の使用方法 | CSS Lecture
↑デモはこちらが非常にわかりやすかったです。