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

2019-08-09

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

  • セレクタ {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);}

     

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

     

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

     

CSS Transitionで手軽にアニメーションを取り入れたい” に対して1件のコメントがあります。

  1. こんにちは、これはコメントです。
    コメントの承認、編集、削除を始めるにはダッシュボードの「コメント画面」にアクセスしてください。
    コメントのアバターは「Gravatar」から取得されます。

コメントは受け付けていません。

広告スポンサーリンク