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

CSSでアニメーションの終わりをゆっくりにする方法｜ease-outの使い方を解説

CSSでアニメーションの終盤だけ速度を落としたい場合には、animation-timing-functionプロパティにease-outを指定します。ease-outは「開始時は速く、終了に向かって徐々に減速する」イージングカーブで、要素が滑らかに停止するような自然な動きを実現できます。

ease-outを使ったアニメーションの基本構文

以下のように、対象の要素に対してanimation-timing-function: ease-out;を設定するだけで、スローエンド（緩やかな終わり）のアニメーションが適用されます。

selector {
  animation-timing-function: ease-out;
}

サンプルコード

次の例では、div要素を左右に移動させるアニメーションに対してease-outを適用しています。3回繰り返され、往復方向も指定しているため、動きの違いが分かりやすくなっています。

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

コードのポイント解説

1. アニメーションの基本設定

animation-nameでキーフレーム（@keyframes myanim）を指定し、animation-duration: 2s;で1回あたりの再生時間を2秒に設定しています。

2. 繰り返しと方向の指定

animation-iteration-count: 3;でアニメーションを3回繰り返し、animation-direction: alternate-reverse;で逆方向から交互に再生することで、行って戻るような動きを作っています。

3. ease-outによる減速効果

IDセレクタ#demoに対してanimation-timing-function: ease-out;を指定することで、各サイクルの終わり際に速度が緩やかになります。要素が目的地に近づくにつれてブレーキがかかるような、自然で洗練された印象のモーションになります。

他のtiming-functionとの違い

ease-outとよく比較される値として、以下のようなものがあります。用途に応じて使い分けると効果的です。

  • linear：一定の速度で変化。機械的で均一な動き。
  • ease-in：開始が遅く、終了に向けて加速する。
  • ease-in-out：開始と終了の両方が緩やか。
  • ease-out：開始が速く、終了に向けて減速する。ボタンやポップアップの登場演出などに最適。

このように、animation-timing-functionの値を変えるだけでアニメーションの印象は大きく変わります。ぜひ実際にコードを書いて、ease-out特有の滑らかな減速感を確認してみてください。

  1. CSSのease-inを使ってスロースタートのアニメーションを設定する方法

    CSSでアニメーションに「ゆっくり始まる」動き（スロースタート）を加えたい場合は、animation-timing-function プロパティに ease-in を指定します。ease-in は、アニメーションの開始時に速度が遅く、進行に合わせて徐々に加速していくイージング関数です。 ease-inの指定例 次のサンプルでは、黄色いボックスが左から右へ移動するアニメーションに対して animation-timing-function: ease-in; を適用しています。ボックスは最初ゆっくり動き出し、次第に速くなりながら移動します。 サンプルコード <!DOCTYPE html>

  2. CSSで最初から最後まで一定速度のアニメーションを設定する方法

    CSSでアニメーションを作成すると、デフォルトでは開始時に加速し、終了時に減速する「イージング」が自動的に適用されます。しかし、ローディングスピナーやプログレスバーのように、最初から最後までまったく同じ速度で動かしたいケースもあります。 そのような場合に活用するのが、animation-timing-functionプロパティです。このプロパティにlinear（リニア）という値を指定すると、アニメーション全体を通じて一定の速度が保たれます。 animation-timing-function: linear とは linearは、アニメーションの進行速度を一定に保つための値です。加速も減速もな