CSS Transitionで手軽にアニメーションを取り入れたい

PR　当ページのリンクには広告が含まれています。

CSS Transition

CSSのアニメーションは大きく分けて2種類、「Transition」と「Animation」があります。
ここでは「Transition」をまとめました。

「Transition」は変化の内容を設定し疑似要素と合わせて使用します。
↓こんな感じです。

セレクタ {transition: 0.5s ease-out;
-webkit-transition:0.5s ease-out;}
セレクタ:hover {transform:scale(0.8);}

Transition で設定できること

transition-property

適用させる項目。記述しなければ初期値はall（例：colorを指定するとcolorのみにtransitionが効く）

transition-duration

アニメーションの長さ※1s＝1000ms＝1秒

transition-delay

アニメーション開始までの時間

transition-timing-function

開始～終了までの変化のしかた。ease(初期値)、ease-in、ease-out、ease-in-out、linearなど

ショートハンドプロパティ

半角スペースを入れて記述します。

セレクタ {transition:transition-property transition-duration transition-timing-function transition-delay;}
例）セレクタ {transition:background-color 1s ease-in-out 0.5s;}

※アニメーションの長さ「transition-duration」をアニメーション開始までの時間「transition-delay」より先に書く。

複数プロパティ

カンマを入れてまとめて記述します。

セレクタ {transition:width 3s ease-out 0s , color 1s linear 0.5s , height 2s ease-in 1s;}

まとめ

いろいろ細かく設定できそうですが、ひとまずはアニメーションの長さを入れておけば何とかなる気がします！
「:hover」で変化を追加してオンマウスで滑らかに変化させたり、押す感を出せたり。これだけでちょっとインタラクティブなサイトになりますね！

transition: 0.5s;-webkit-transition:0.5s

Transform（変形）

• translate トランスレイト…移動
  transform:translate(X軸移動,Y軸移動,Z軸移動);
• rotate ローテート…回転
  transform:rotate;　45degなら時計回りに45度回転。
  transform:rotateX(X軸回転);
  transform:rotateY(Y軸回転);
  transform:rotateZ(Z軸回転);
  transform:rotate3d(数値,数値,数値,角度);
• scale スケール…伸縮
• skew スキュー …傾斜

複数設定

半角スペースを入れ続けて記述します。

セレクタ {transform:translateY(70px) translateZ(50px) rotate(80deg);}

Sample

• scale

  セレクタ {transition: all 1s ease-out;
  -webkit-transition:all 1s ease-out;
  -moz-transition:all 1s ease-out;
  -o-transition:all 1s ease-out;}
  セレクタ:hover {transform:scale(1.3,0.8);}

   

• skew

  セレクタ{transition: all 1s ease-in;}
  /*ベンダープレフィックス省略*/
  セレクタ:hover {transform:skew(30deg,20deg);}

   

• translate

  セレクタ {transition: all 0.5s ease-in;}
  /*ベンダープレフィックス省略*/
  セレクタ:hover {transform:translate3d(1em, 3em, 6em);}