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

CSSのtransition-timing-functionプロパティでトランジションの速度カーブを設定する方法

transition-timing-functionプロパティとは

CSSのtransition-timing-functionプロパティは、トランジション（遷移）効果の進行速度を時間の経過とともにどのように変化させるかを指定するためのプロパティです。このプロパティを使うことで、アニメーションを一定の速度で進めたり、最初はゆっくり動いて途中から加速させたりするなど、さまざまな「速度カーブ」を表現できます。

主なキーワード値

  • linear：開始から終了まで同じ速度で一定に変化します。
  • ease：初期値です。ゆっくり始まり、途中で加速し、最後にゆっくり終わります。
  • ease-in：ゆっくりと始まり、徐々に加速していきます。
  • ease-out：速く始まり、徐々に減速しながら終わります。
  • ease-in-out：ゆっくり始めて加速し、最後にまたゆっくりと終わります。

サンプルコード

次のコードでは、3つのdiv要素にそれぞれ異なるtiming-functionを指定しています。各要素にマウスカーソルを合わせると、幅が4秒かけて250pxまで変化し、それぞれの速度カーブの違いを目で確認できます。

<!DOCTYPE html>
<html>
  <head>
    <style>
      div {
        width: 100px;
        height: 100px;
        background: red;
        color: #fff;
        margin-bottom: 10px;
        transition: width 4s;
      }
      #effect1 {
        transition-timing-function: linear;
      }
      #effect2 {
        transition-timing-function: ease-in;
      }
      #effect3 {
        transition-timing-function: ease-out;
      }
      div:hover {
        width: 250px;
      }
    </style>
  </head>
  <body>
    <h1>Transition Effect</h1>
    <p>Hover over the div elements and see the transition effect and the speed:</p>
    <div id="effect1">linear effect</div>
    <div id="effect2">ease-in effect</div>
    <div id="effect3">ease-out effect</div>
  </body>
</html>

コードのポイント

ベースとなるdiv要素にはtransition: width 4s;を指定し、幅の変化が4秒間かけて行われるように設定しています。そのうえで、IDごとにtransition-timing-functionの値を切り替えることで、同じ時間でも動きの印象が大きく変わることがわかります。

さらに細かく速度カーブを制御したい場合は、cubic-bezier()関数を使うことで独自のカーブを定義することも可能です。例えばcubic-bezier(0.25, 0.1, 0.25, 1)のように4つの数値を指定して、より自由なアニメーション表現ができます。

  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