CSSアニメーションの速度を操る！初心者でもわかるtiming-function使い分けガイド

animation-timing-function の使い分け（ease・linearなど）

先生と生徒の会話形式で理解しよう

生徒

「CSSでアニメーションを作ってみましたが、動きが機械的で少し不自然なんです。もっと滑らかに、人間らしい動きにできませんか？」

先生

「それは『animation-timing-function（アニメーション・タイミング・ファンクション）』という設定を使うと解決できますよ。動きの『加速』や『減速』を自由にコントロールできるんです。」

生徒

「加速や減速ですか？設定の名前が長くて難しそうですが、使い分けは簡単ですか？」

先生

「はい！いくつかの代表的なキーワードを覚えるだけで、見違えるほど自然な動きになります。さっそく、その種類と使い方をマスターしましょう！」

1. animation-timing-functionとは？動きの緩急を決める魔法の命令

ウェブサイトで画像や文字を動かすとき、ずっと同じ速さで動くと、どこかロボットのような硬い印象を与えてしまいます。現実世界では、車が走り出すときは徐々にスピードを上げ、止まるときはゆっくり速度を落としますよね。このような「動きの緩急（かんきゅう）」を設定するのがanimation-timing-function（アニメーション・タイミング・ファンクション）です。

プログラミング未経験でパソコンを初めて触る方にとって、この長い英単語は少し怖く感じるかもしれません。しかし、中身はとてもシンプルです。これは、アニメーションの開始から終了までの「時間の使い道」を指定しているだけなのです。どのタイミングで速くして、どのタイミングでゆっくりにするか、そのパターンを選ぶだけだと考えてください。

この設定を正しく使い分けることで、ボタンを押したときの反応を心地よくしたり、メニューがスッと出てくる演出を上品にしたりすることができます。SEO（検索エンジン最適化）の観点からも、ユーザーが「触っていて気持ちいい」と感じるサイトを作ることは、滞在時間を延ばすことにつながり、間接的にGoogleからの評価アップにも貢献します。

2. 標準的な動きを作るease（イーズ）の特徴と使い方

CSSアニメーションで最もよく使われるのがease（イーズ）です。これは、アニメーションの開始時はゆっくり始まり、途中からスピードを上げ、最後はまたゆっくりと停止する設定です。実は、この設定は何も書かなくても最初から適用されている「デフォルト」の設定でもあります。

なぜこれが標準なのかというと、人間が物を見るときに一番自然に感じる動きだからです。例えば、引き出しを開け閉めしたり、ドアが閉まったりする動きに近いものがあります。迷ったらこれを使っておけば間違いありません。パソコン初心者の方は、まずはこの「ease」という単語を「自然な動き」として覚えておきましょう。


<style>
    @keyframes move-ease {
        from { left: 0; }
        to { left: 200px; }
    }
    .box-ease {
        width: 100px;
        height: 100px;
        background-color: #007bff;
        position: relative;
        animation-name: move-ease;
        animation-duration: 2s;
        animation-iteration-count: infinite;
        /* 標準的な加速と減速をつける */
        animation-timing-function: ease;
    }
</style>

<div class="box-ease"></div>
<p>最初と最後がゆっくり動く「ease」の例です。</p>

ブラウザ表示

3. ずっと同じ速さで動くlinear（リニア）の使い方

linear（リニア）は、アニメーションの開始から終了まで、全く同じスピードで一定に動く設定です。「直線的な」という意味があり、加速も減速も一切ありません。ベルトコンベアやメリーゴーランドのように、淡々と動き続けるものに向いています。

この設定は、背景画像をずっとループさせたり、ローディングアイコン（読み込み中に回るマーク）を一定の速さで回転させ続けたりするときに非常に便利です。逆に、ボタンの移動などに使うと、少し不自然に感じるかもしれません。用途に合わせて「一定の速さが欲しい」ときにはこのlinearを使いましょう。


<style>
    @keyframes spin {
        from { transform: rotate(0deg); }
        to { transform: rotate(360deg); }
    }
    .loader {
        width: 60px;
        height: 60px;
        border: 10px solid #f3f3f3;
        border-top: 10px solid #28a745;
        border-radius: 50%;
        animation: spin 1s infinite;
        /* ずっと一定の速さで回し続ける */
        animation-timing-function: linear;
    }
</style>

<div class="loader"></div>
<p>一定の速度で回り続ける「linear」の例です。</p>

ブラウザ表示

4. 徐々にスピードを上げるease-in（イーズイン）

ease-in（イーズイン）は、最初はゆっくり動き出し、後半にかけて徐々にスピードが速くなっていく設定です。「イン」は始まりを意味します。イメージとしては、車が発進する瞬間に似ています。

この設定は、画面の外に要素が消えていくような演出（フェードアウトなど）によく使われます。最初は静かに動き始め、最後は勢いよく去っていくような印象を与えることができます。ウェブサイトのメニューを閉じるときなどに使ってみると、キレのある動きになります。

5. 最後をゆっくり着地させるease-out（イーズアウト）

ease-out（イーズアウト）は、ease-inの反対で、最初は速いスピードで動き出し、最後にかけてゆっくりと止まる設定です。「アウト」は終わりを意味します。勢いよく走ってきた人が、ゴール付近でスピードを緩めて着地するようなイメージです。

ユーザーの操作に対して、何かがパッと現れるときにはこの設定が最適です。例えば、ボタンをクリックして詳細パネルが開くとき、このease-outを使うと、素早く反応しつつ最後は丁寧に着地するような、高級感のある動きになります。プログラミング初心者が「動きをオシャレにしたい」と思ったら、まずはこのease-outから試してみるのが定石です。


<style>
    @keyframes fade-up {
        from { transform: translateY(50px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
    }
    .panel {
        width: 200px;
        padding: 20px;
        background-color: #ffc107;
        border-radius: 10px;
        animation-name: fade-up;
        animation-duration: 0.8s;
        /* 素早く出てきて、最後はゆっくり止まる */
        animation-timing-function: ease-out;
    }
</style>

<div class="panel">お知らせです！</div>
<p>上品に表示される「ease-out」の例です。</p>

ブラウザ表示

6. 両端をゆっくりにするease-in-out（イーズインアウト）

ease-in-out（イーズインアウト）は、開始と終了の両方をゆっくりにし、中間だけを速くする設定です。最初に紹介した「ease」と似ていますが、ease-in-outの方が、最初と最後の減速がよりハッキリしていて、より重厚な動きに感じられます。

振り子のような往復運動や、ふわふわと浮いているような動きを作りたいときにぴったりです。開始と終了のスピードの差がはっきりしているため、リズム感のあるアニメーションになります。少し凝ったデザインのサイトを作りたいときに活躍するキーワードです。

7. カクカクした動きを作るstep-startとstep-end

これまでは「滑らかな動き」を解説してきましたが、あえて滑らかさを捨てて「カクカク」と動かす方法もあります。それがsteps（ステップス）に関連する設定です。これはアニメーションをいくつかの「段階」に分けて、コマ送りのように表示します。

例えば、時計の秒針がチッチッと刻むような動きや、ドット絵のキャラクターが歩くような表現に使います。プログラミングを始めたばかりの方には少し意外かもしれませんが、こうした「あえて滑らかにしない」という選択肢もウェブ制作には存在するのです。パラパラ漫画の1ページずつをめくるような感覚だとイメージしてください。

8. 自由自在にカーブを描くcubic-bezier（三次ベジェ曲線）

さらにこだわりたい上級者向けの設定として、cubic-bezier（三次元ベジェ曲線）というものがあります。これは、加速と減速の度合いを自分で数値（4つの数字）を指定して作り出す方法です。

「0.1, 0.7, 1.0, 0.1」といった数値を指定することで、バウンドするような動きや、一瞬後ろに引いてから飛び出すような特殊な動きを作ることができます。パソコンに慣れていない段階でこの数値を手入力するのは難しいですが、便利な「数値を自動で作ってくれるサイト（ベジェ曲線作成ツール）」もネット上にたくさんあります。キーワードとして知っておくだけでも、いつか役立つ日が来ますよ。


<style>
    @keyframes bounce-custom {
        from { transform: scale(0.5); }
        to { transform: scale(1.2); }
    }
    .custom-btn {
        display: inline-block;
        padding: 10px 20px;
        background-color: #e83e8c;
        color: white;
        border-radius: 5px;
        animation: bounce-custom 0.5s infinite alternate;
        /* 特殊な加速・減速を数値で指定 */
        animation-timing-function: cubic-bezier(0.68, -0.55, 0.27, 1.55);
    }
</style>

<div class="custom-btn">注目ボタン</div>
<p>少し跳ねるような特殊な動きの例です。</p>

ブラウザ表示