フロントエンド強化期間中のため、今回はフロントエンドのアニメーションをどのようにしてつけるのかをまとめました。
フロントエンドのアニメーションとは？
ChatGPT
CSSアニメーションは、ウェブページの要素に滑らかな動きや段階的なスタイル変更を適用する手法です。@keyframesとCSSプロパティを組み合わせることで、時間の経過と共に要素がどのように変化するか定義します。これにより、ユーザーの注意を引く効果や、インターフェイスの直感性向上に貢献し、ウェブサイトのユーザビリティと魅力を高めます。
つまり、CSSアニメーションは、ウェブサイト上で要素を動かしたり、見た目を時間経過と共に変化させたりする技術です。また実装では@keyframesで動きの段階を定義し、CSSプロパティで適用することで簡単に実装できます。
実装の手順
実装の方法はレスポンシブの設定に少し似ているかもしれません。
まず最初に下記のようなHTMLコードを用意します。
<h1 class="slidein">アニメーションを適用するテキスト</h1>
次にCSSファイルに、下記のような設定を行います。
h1 {
animation: fadeIn 1s ease-in-out forwards;
}
@keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
やっていること（「h1 {...」の内容）：
・animation: このプロパティは、要素に対してアニメーションを適用します。
・fadeIn: これはアニメーションの名前です。この場合、アニメーションのキーフレームが@keyframes fadeIn { ... }として定義されている必要があります。
・1s: アニメーションの持続時間を示しており、この場合は1秒間です。
・cubic-bezier(0.25, 1, 0.5, 1): アニメーションのタイミング関数を定義しています。これはアニメーションの速度曲線を指定し、アニメーションがどのように進行するか（始まりが遅く終わりが速いなど）をコントロールします。ここで指定されたcubic-bezier関数は、アニメーションの加速と減速のパターンをカスタマイズします。
・forwards: アニメーション終了時のスタイルを、アニメーションの最後のキーフレームの値に保持するよう指定しています。つまり、アニメーションが完了した後も、要素はアニメーションの最終状態を維持します。
やっていること（「@keyframes fadeIn {...」の内容）：
・@keyframes slideIn： CSSアニメーションで要素をスライドインさせる動きを定義しています。
・開始時（0%）: アニメーションが始まると、要素の透明度が0です。これは要素が完全に透明で、見えない状態であることを意味します。
・終了時（100%）: アニメーションが終わるまでに、要素の透明度が1に変化します。これは要素が完全に不透明になり、完全に見える状態になることを意味します。
まとめ
アニメーションは最初javascriptで設定するイメージだったけど、CSSで簡単に設定できることがわかりました。またアニメーションの設定ではテンプレなどもたくさんネットにあるため、最初はこれらを使用することで試していくのがいいと思います。
私は「【コピペでOK】サイトに動きをつけるCSSアニメーションまとめ（デモ・サンプルコード付き）」のサイトのテンプレを使用しながら学習しました。