WEBサイト制作効率化のための、
デザイン・wordpressの試作や覚え書き

css

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

2019-08-09

CSS Transition

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

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

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-duration」をアニメーション開始までの時間「transition-delay」より先に書く。

複数プロパティ

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

まとめ

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

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 スキュー …傾斜

複数設定

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

Sample

-css

関連記事

CSSで影をつける

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

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

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

cssで作るいろいろなグラデーション

鮮やかなグラデーションを取り入れたサイトをよく見ます。 様々なタイプのグラデーション記述方法をまとめてみました! グラデーションの種類 基本 グラデーションはbackgroundで指定します。先に書い …

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

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

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