CSSアニメーション：ウェブページを生き生きとする

こんにちは、未来のウェブ魔法師さんたち！今日は、CSSアニメーションの魔法の世界に飛び込みます。このチュートリアルの終わりまでに、あなたはデジタルのフレッド・アステアのようにウェブページ上の要素を踊らせることができるようになります。では、虚拟のダンスシューズを履けて、始めましょう！

CSSアニメーションとは？

CSSアニメーションは、ウェブページ上の静的な要素に命を吹き込むものです。ユーザーが要素にホバーしたときにボタンがパルスする、またはページが読み込まれたときにロゴが回転する imagine してみてください。これがCSSアニメーションの力です！CSSプロパティの値を指定されたdurationで変更することで、動きと視覚的な興味をJavaScriptやFlashの複雑さなしに作成することができます。

@keyframesルール

CSSアニメーションの心臓部は@keyframesルールです。ここでアニメーションのステージを定義します。

@keyframes bounce {
0% { transform: translateY(0); }
50% { transform: translateY(-20px); }
100% { transform: translateY(0); }
}

この例では、「bounce」というアニメーションを作成しています。0%（開始）では、要素は元の位置にあります。50%（アニメーションの途中）では、20ピクセル上に移動します。100%（終わり）では、元の位置に戻ります。

アニメーションディレイプロパティ

時々、アニメーションを開始する前に待たせたいことがあります。そのときに便利なのがanimation-delayプロパティです。

.delayed-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-delay: 2s;
}

このCSSは、クラス「delayed-bounce」を持つすべての要素に「bounce」アニメーションを適用します。アニメーションは1秒間続きますが、ページが読み込まれた後2秒間待ってから開始します。

アニメーション反復回数の設定

デフォルトでは、アニメーションは一度実行された後停止します。しかし、エナジェイザーのバニーのようにずっと続けたい場合はどうでしょうか？そのときに便利なのがanimation-iteration-countです。

.infinite-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
}

今度は、バウンジング要素が永久にバウンスし続けます（ユーザーがページを閉じるか、それが先に来るまで）！

アニメーション方向プロパティ

時々、アニメーションを後戻りさせたい、または前後交互にしたいことがあります。そのときに便利なのがanimation-directionプロパティです。

.alternate-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-iteration-count: infinite;
animation-direction: alternate;
}

これで、要素は連続的に上下にバウンスします。まるで永遠運動機械のようです（もしこれをクリーンエネルギーとして利用できたら！）。

アニメーションタイミング関数

animation-timing-functionプロパティは、アニメーションのペースをコントロールするのに役立ちます。まるで自分のデジタルオーケストラの指揮者のように！

.ease-in-out-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-timing-function: ease-in-out;
}

これにより、バウンスアニメーションは始めはゆっくり、中間では速くなり、終わりに近づくと再びゆっくりになります。より自然な、バウンス感のある感じになります。

アニメーションフィルモードの設定

animation-fill-modeプロパティは、要素がアニメーションの前後でどのように見えるべきかを決定します。

.fill-mode-bounce {
animation-name: bounce;
animation-duration: 1s;
animation-fill-mode: forwards;
}

forwardsを使用すると、アニメーションが終了したときに要素は最後のキーフレームのスタイルを保持します。元の状態に戻ることはありません。

アニメーション shorthand プロパティ

これらのプロパティに圧倒されている場合は、心配しないでください！CSSには、すべてのアニメーションプロパティを一度に設定するショートカットプロパティがあります。

.shorthand-bounce {
animation: bounce 1s ease-in-out 2s infinite alternate forwards;
}

この一行は、アニメーション名、duration、タイミング関数、ディレイ、反復回数、方向、フィルモードをすべて設定します。まるでCSSアニメーションのスイスアーミー knives！

CSSアニメーションプロパティの一覧

ここに、私たちがカバーしたすべてのCSSアニメーションプロパティの便利な表があります：

プロパティ	説明
animation-name	@keyframesアニメーションの名前を指定します
animation-duration	アニメーションが一周期完了するまでの時間を指定します
animation-timing-function	アニメーションの速度曲線を指定します
animation-delay	アニメーションの開始を遅らせるディレイを指定します
animation-iteration-count	アニメーションが再生される回数を指定します
animation-direction	アニメーションが反復する際に逆方向に再生されるかどうかを指定します
animation-fill-mode	アニメーションが実行されている時間外に適用される値を指定します
animation	すべてのアニメーションプロパティを一度に設定するショートカットプロパティ

そして、皆さん、ここまでです！あなたは今、CSSアニメーションでウェブページを生き生きとするための知識を手に入れました。力には責任が伴います - これらのアニメーションをユーザー体験を向上させるために、而不是それを邪魔するために使用してください。

練習を重ねることで、CSSアニメーションは料理のように - レシピを完璧にするには時間がかかります。しかし、一度それを掌握すると、ユーザーが再び訪れる魅力的でアニメーションされたウェブ体験を提供することができます！

さあ、デジタルのピクサー見習いの皆さん、進んでアニメーションを始めてください。ウェブはあなたのキャンバス、CSSはあなたの絵の具です。ハッピーなアニメーションを！

Credits: Image by storyset