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

CSSのtransition-timing-functionを使ってさまざまな速度曲線を設定する方法

CSS transition-timing-functionとは

transition-timing-functionは、CSSトランジションにおけるアニメーションの進行速度（速度曲線）を制御するプロパティです。このプロパティを指定することで、要素が変化するときの加速・減速のパターンを細かく調整できます。

主な値には以下のようなものがあります。

  • linear：最初から最後まで一定の速度で変化します。
  • ease-in：ゆっくりと始まり、徐々に速くなります。
  • ease-out：速く始まり、ゆっくりと終わります。
  • ease：ゆっくり始まり、途中で速くなり、最後はゆっくり終わります（デフォルト値）。
  • ease-in-out：ゆっくり始まり、ゆっくり終わります。

transition-timing-functionの使用例

以下のコードでは、linear、ease-in、ease-outの3種類の速度曲線をそれぞれ異なるdiv要素に適用しています。各要素にマウスカーソルを合わせると、幅が4秒かけて変化し、それぞれの速度曲線の違いを確認できます。

サンプルコード

<!DOCTYPE html>
<html>
   <head>
      <style>
         div {
            width: 100px;
            height: 100px;
            background: red;
            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><br>
      <div id = "effect2">ease-in effect</div><br>
      <div id = "effect3">ease-out effect</div><br>
   </body>
</html>

コードの解説

このサンプルコードでは、すべてのdiv要素に対して基本スタイルとして幅100px・高さ100px・赤色の背景を設定し、transition: width 4s;によって幅の変化に4秒間のトランジションを適用しています。

さらに、IDごとに異なるtransition-timing-functionを指定することで、以下のような違いが生まれます。

  • #effect1（linear）：幅が一定のペースで滑らかに広がっていきます。
  • #effect2（ease-in）：変化の開始は遅めですが、時間が経つにつれて加速していきます。
  • #effect3（ease-out）：変化は素早く始まり、終わりに向かって減速しながら停止します。

:hover疑似クラスにより、マウスカーソルを重ねたときに幅が250pxまで拡張される仕組みです。実際にブラウザで動作させて、3つの要素の速度の違いを比べてみてください。

まとめ

transition-timing-functionを活用すると、同じトランジションでも印象が大きく変わります。UIのボタンやメニューなどに適切な速度曲線を選ぶことで、より自然で洗練されたアニメーション表現が可能になります。ぜひさまざまな値を試して、用途に合った速度曲線を見つけてみてください。

  1. 【CSS】Flexboxで作る高度なレイアウト！基本プロパティと実装サンプルを解説

    Flexbox（フレックスボックス）とは？ CSS3には「Flexible Box Layout（フレキシブルボックスレイアウト）」と呼ばれるレイアウトモードが用意されており、一般的にはFlexbox（フレックスボックス）として知られています。Flexboxを活用することで、従来のfloatやpositionを使った手法よりもはるかに簡単かつ柔軟に、複雑なWebアプリケーションやWebページのレイアウトを構築できます。 Flexboxは「フレックスコンテナ」（親要素）と「フレックスアイテム」（子要素）という2つの概念で構成されます。親要素にdisplay: flex;を指定するだけで、その直下

  2. CSSだけで実現するスムーススクロールの書き方

    CSSのscroll-behaviorプロパティを使うと、アンカーリンクによるページ内移動時のスクロール動作を、JavaScriptに頼ることなく純粋なCSSだけで制御できます。値にsmoothを指定すれば、クリック一つで目的地までなめらかにアニメーションしながらスクロールします。 scroll-behaviorプロパティの主な値 auto:ブラウザの標準動作。リンクをクリックすると瞬時に目的の位置へジャンプします。 smooth:滑らかなアニメーションを伴ってスクロールします。 このプロパティはChrome、Firefox、Edge、Safariなどの主要ブ