CSS3のアニメーションプロパティをより滑らかに見せるにはどうすればよいですか？

ps：まずは余談を少し。仕事の関係で長い間ブログを更新していませんでしたが、最近一段落ついたので、いくつかのことを処理した後、安心して座ってブログを再整理することができます。

今日は CSS3 の新しいプロパティanimationについてお話しします。これは一種の振り返りでもあり、普段の使い方やいくつかのテクニックを共有したいと思います。もっと基本的な内容を学びたい方は、こちらのリンクをクリックしてください：https://www.runoob.com/css3/css3-animations.html。ネット上には似たようなチュートリアルがたくさんあります。

この記事ではアニメーションの基本的なプロパティについて詳しく説明するのではなく、少し話題を広げます：CSS3 のアニメーションプロパティをより滑らかに見せるには？

もちろん、話を始める前に animation の基本プロパティについて簡単に紹介します。

animation プロパティ#

animation プロパティには以下の値があります：

@keyframes | アニメーション自体（最も重要）
animation-name | アニメーションの名前
animation-duration | アニメーションの所要時間
animation-fill-mode | プロパティが forwards の場合、アニメーションは最後のフレームに留まる

アニメーションは主に公式サイトのエフェクトやレスポンシブなレイアウトに使用されます。

最も基本的なアニメーションを書く方法#

アニメーションは、ある状態から別の状態へのプロセスです。たとえば、左から右への移動プロセスです。

まず、各プロパティの具体的な役割を理解する必要があります。白から黒への例を挙げて、まず@keyframesのアニメーションプロセスを書きます。

@keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

このコードは、leftrightという名前のアニメーションがあり、コンテナを左から右に 100px 移動させることを意味します。

次に、このアニメーションをさらに補完します。

<!DOCTYPE html>
<html>
<head>
    <title>アニメーション</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

ブラウザでこのページを実行してみると、黒い四角が左右に 100px 移動するのが見えます。合計 1 秒で完了します。

しかし、このアニメーションは突然終了し、コンテナが突然元の位置に戻ります。なぜでしょうか？最後のフレームを保持していないからです。これにはプロパティが必要です。最初に説明した通りです。

.demo {
    width: 100px;
    height: 100px;
    background: #fff;
    animation-name: leftright; /* アニメーションの名前をこのタグにバインド */
    animation-duration: 1s;     /* アニメーションのプロセスに期間を設定 */
    animation-fill-mode: forwards; /* アニメーションは最後のフレームに留まる */
}

実行すると、アニメーションが最後に停止するのが見えます。

アニメーションに慣性を持たせる#

このアニメーションをよく観察すると、全体のプロセスが迅速に完了しますが、ある問題に気付きました。全体のプロセスが滑らかではなく、ぎこちなく、左から右へと移動する際に全く滑らかさがありません。

分析すると、日常生活の習慣的なアニメーション、つまり慣性が欠けています。このプロパティは存在せず、直接設定することはできません。アニメーション自体のプロパティを調整する必要があります。次のコードを見てみましょう。

 @keyframes leftright {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(100px);
    }
}

0%は開始を、100%は終了を表します。これらは時間のノードを指し、この時間のノードでアニメーションは指定された位置に移動する必要があります。

したがって、新しい時間ノード50%を追加できます。時間が半分経過したときに、四角が 120px の位置に移動し、その後戻るようにします。

以下は完全なコードで、ローカルにコピーして実行してみてください。

<!DOCTYPE html>
<html>
<head>
    <title>アニメーション</title>
    <style>
        .demo {
            width: 100px;
            height: 100px;
            background: #000;
            animation-name: leftright;
            animation-duration: 1s;
            animation-fill-mode: forwards;
        }

        @keyframes leftright {
            0% {
                transform: translateX(0);
            }
            50% {
                transform: translateX(120px);
            }
            100% {
                transform: translateX(100px);
            }
        }
    </style>
</head>
<body>
    <div class="demo"></div>
</body>
</html>

修正後、ブラウザで効果を確認してください。

滑らかさが増し、慣性の感覚が生まれました。これは、アニメーションのニーズに直面したときに非常に重要です。ユーザーの体験をより強化する方法は、技術の一つです。

これらは基本的なことですが、体験感が向上すれば、ウェブサイトのリピート率も高くなると思います。たとえば、あるショッピングサイトで買い物をする際、全体のページが快適に見え、エフェクトの細部が滑らかであれば、購買意欲が増すのではないでしょうか。こう言うと浅薄に聞こえるかもしれませんが、実際には心理的な影響があります。

アニメーションエフェクトをうまく活用することは一つの学問であり、CSS を駆使することは簡単ではありません。