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

css

2019-08-09

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

関連記事

テキストに縁や影をつける

cssでテキストに縁や影をつけます。

CSSで影をつける

CSSでドロップシャドウをつける方法を二つ紹介します。

隣接セレクタ・間接セレクタ・直下セレクタでCSSを記述したい

隣接セレクタ・間接セレクタ・直下セレクタとは? 隣接セレクタ 要素を結合子「+」でつなぎます。例えば要素A+要素Bの場合、要素Aと同じ階層にあるすぐ後の要素Bにスタイルがつきます。 間接セレクタ 要素 …

CSSで上下センター揃え

上下センター揃え フレックスボックス 「display: flex」を使います。 セレクタ{display: flex; justify-content: center; align-items: c …

CSS Animationでアニメーションを表現する

JavaScriptを使わずにCSSだけでアニメーションを表現!CSS Animationキーフレームは0%(アニメーションの開始)から100%(終わり)まで細かく指定できます。

サイトに訪れていただきありがとうございます!このブログでは、調べたこと、試したことを次回スムーズに行うための覚え書きをアップしています。