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

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

CSSでアニメーションに「ゆっくり始まる」動き（スロースタート）を加えたい場合は、animation-timing-function プロパティに ease-in を指定します。ease-in は、アニメーションの開始時に速度が遅く、進行に合わせて徐々に加速していくイージング関数です。

ease-inの指定例

次のサンプルでは、黄色いボックスが左から右へ移動するアニメーションに対して animation-timing-function: 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;}
         }
         #demo {animation-timing-function: ease-in;}
      </style>
   </head>
   <body>
      <div id = "demo">ease-in effect</div>
   </body>
</html>

コードのポイント解説

  • @keyframes myanim：アニメーションの開始時点（from）と終了時点（to）での left の位置を定義しています。
  • animation-duration: 2s：1回のアニメーションにかかる時間を2秒に設定しています。
  • animation-iteration-count: 3：アニメーションを3回繰り返す設定です。
  • animation-direction: alternate-reverse：逆方向から再生し、往復するように動かします。
  • #demo { animation-timing-function: ease-in; }：IDが「demo」の要素だけにスロースタートの動きを適用しています。

主なanimation-timing-functionの値

ease-in 以外にも、目的に応じてさまざまなタイミング関数を選択できます。

  • linear：開始から終了まで一定の速度で変化します。
  • ease：ゆっくり始まり、途中で加速し、最後はゆっくり終わる標準的なカーブです。
  • ease-in：ゆっくり始まり、終了に向けて加速します（スロースタート）。
  • ease-out：速く始まり、終了に向けて減速します。
  • ease-in-out：開始と終了の両方がゆっくりになります。

自然な動きや演出効果を出したい場合は、これらの値を組み合わせて試し、目的の印象に合うものを選ぶのがおすすめです。

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

    CSSでアニメーションの終盤だけ速度を落としたい場合には、animation-timing-functionプロパティにease-outを指定します。ease-outは「開始時は速く、終了に向かって徐々に減速する」イージングカーブで、要素が滑らかに停止するような自然な動きを実現できます。ease-outを使ったアニメーションの基本構文以下のように、対象の要素に対してanimation-timing-function: ease-out;を設定するだけで、スローエンド（緩やかな終わり）のアニメーションが適用されます。selector { animation-timing-function:

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

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