CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSのanimation-timing-functionプロパティとは？使い方をサンプルコードで解説

CSSのanimation-timing-functionプロパティとは

animation-timing-functionは、CSSアニメーションの進行速度カーブ（イージング）を指定するためのプロパティです。アニメーションが開始から終了までどのようなスピード変化で進むかを制御でき、要素に自然で滑らかな動きを与えることができます。

主な値の一覧

  • ease：初期値。ゆっくり始まり、途中で加速し、最後にゆっくり終わる標準的な動き。
  • ease-in：ゆっくり始まり、徐々に加速していく。
  • ease-out：速く始まり、徐々に減速しながら終わる。
  • ease-in-out：ゆっくり始まり、途中で加速し、最後にもう一度ゆっくりになる。
  • linear：開始から終了まで一定の速度で変化する。
  • cubic-bezier(n,n,n,n)：ベジェ曲線を使って独自の速度カーブを細かく定義できる。

animation-timing-functionのサンプルコード

以下のコードを実行すると、easeとease-inそれぞれの効果の違いをブラウザ上で確認できます。

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 150px;
            height: 200px;
            position: relative;
            background-color: yellow;
            animation-name: myanim;
            animation-duration: 2s;
            animation-direction: alternate-reverse;
            animation-iteration-count: 3;
         }
         @keyframes myanim {
            from {left: 100px;}
            to {left: 200px;}
         }
         #demo1 {animation-timing-function: ease;}
         #demo2 {animation-timing-function: ease-in;}
      </style>
   </head>
   <body>
      <div id = "demo1">ease effect</div>
      <div id = "demo2">ease-in effect</div>
   </body>
</html>

コードの解説

このサンプルでは、黄色いdiv要素が@keyframes myanimで定義されたアニメーションによって、left位置100pxから200pxへ移動します。animation-duration: 2sで1回あたり2秒間、animation-iteration-count: 3で3回繰り返し、animation-direction: alternate-reverseで往復方向を反転させながら再生されます。

#demo1にはease、#demo2にはease-inが適用されているため、両者の速度変化の違いを目で見て比べることができます。

まとめ

animation-timing-functionを使いこなすことで、Webサイトのアニメーションにリズムや表情を持たせられます。まずはease系の値から試してみて、より細かい制御が必要になったらcubic-bezier()で調整するのがおすすめです。

  1. CSSでflex-shrinkプロパティをアニメーション化する方法

    CSSのflex-shrinkプロパティは、フレックスコンテナ内のアイテムが縮小する比率を指定できるプロパティです。このプロパティにCSSアニメーションを組み合わせることで、要素の縮み方を滑らかに変化させることができます。 flex-shrinkプロパティとは flex-shrinkは、フレックスボックスレイアウトにおいて、コンテナのスペースが不足したときに各アイテムをどれだけ縮小させるかを決める値です。デフォルト値は「1」で、数値が大きいほど強く縮小されます。「0」を指定すると、そのアイテムはまったく縮小しなくなります。 実装例 以下のコードでは、@keyframesを使ってflex-shr

  2. CSSのisolationプロパティとは？使い方とスタッキングコンテキストの分離方法

    CSSのisolationプロパティは、要素が新しいスタッキングコンテキスト（stacking context）を作成する必要があるかどうかを定義するためのプロパティです。特にmix-blend-modeなどを使ったブレンドモードの適用範囲を制御したい場合に活用できます。構文isolation: auto | isolate | initial | inherit;各値の意味auto：デフォルト値です。通常、新しいスタッキングコンテキストは作成されません。isolate：要素に対して強制的に新しいスタッキングコンテキストを作成します。ブレンドモードの影響範囲をこの要素内に限定できます。init