ねこきっくぱんちのメモ帳

webの勉強メモです。 HTML,CSS,JavaScript,PHP,Illustrator,Photoshopなど。

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
↑デモはこちらが非常にわかりやすかったです。