＃12 サイトにふわっと表示させるアニメーションを作ってみる。

だんだんと暑さも和らぎ秋がやってきました。外の気温がちょうどよく窓開けてWEB制作していると「WEB制作頑張ろう（PC置いてお出かけしたいという・・・）」という気持ちになります。

今回のテーマはCSS アニメーションを使ってサイトに動きをつける方法を書いていきます。テーマの標準機能ではなんだか物足りない時や、面白い表現をさせてたいときにさっと使うことができます。CCSアニメーションは、要素を移動、変形、フェードイン/フェードアウトなど、さまざまな表現方法があります。流れさえ覚えてしまえ簡単ですので、ご自身のポートフォリオサイトにも活用してみてください！

以下は基本的な手順です。

1.アニメーションを適用したいHTML要素を<div>要素</div>で準備します。

<div class="animated-element">この要素だよ！</div>

＜表示＞

2．CSSアニメーションを使って書いたHTMLにアニメーションを適用させます。

<div class="animated-element" style="animation: myAnimation 3s ease infinite;">
  この要素だよ！
  <style>
    @keyframes myAnimation {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }
      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }
  </style>
</div>

＜表示＞

＜コードの解説＞

このコードでは、要素がページに表示されるときに消えている状態からフェードインしながら上に移動していくアニメーションが実行されます。トップページを開いたときにトップ画像上に文字を表示させたいときなどに使えます。アニメーションの詳細やスタイルは、必要に応じて調整してみてください。

①class="animated-element": 要素に "animated-element" というクラス名を指定しています。この要素がアニメーションを適用する対象です。

②animationプロパティ: アニメーションを指定します。アニメーションの名前（今回は"myAnimation"）、アニメーションの持続時間（3秒）、タイミング関数（"ease"）、繰り返し回数（"infinite"）が設定されています。これにより、3秒かけて永遠にループされるアニメーションが要素に適用されます。

③@keyframesのルール: アニメーションのキーフレームを定義します。0%から始まり、100%で終わる間で表現が変化します。0%の状態では要素は透明（opacity: 0）で下に20px移動（transform: translateY(20px)）し、100%の状態では完全に表示され（opacity: 1）、元の位置に戻るアニメーションです。（transform: translateY(0)）。

3．こんなのもできますよ！

アニメーションを使うとこんなのもできます。多様しすぎるとサイト全体が見難くなりますがポイントで使うと面白いですね。