【CSS】残像効果完全解説！3ステップで実現

はじめに
●残像効果の作り方：3ステップで実現
●応用例とサンプルコード
- ○複数の要素に残像効果を適用する
- ○連続的な残像効果を作成する
まとめ

はじめに

ウェブページをデザインする際、魅力的な効果を実現する方法がたくさんありますが、

その中でもCSSを使った「残像効果」はとても印象的で、目を引く効果が期待できます。

この記事では、CSSで残像効果を作成・利用する方法を初心者目線で徹底解説します。

CSSに関して全く知らない初心者でも、この記事を読むことで残像効果の作り方・使い方・対処法が理解でき、実際にサンプルコードを使って応用できるようになります。

●残像効果の作り方：3ステップで実現

では、具体的に残像効果を実現する方法を3ステップで解説しましょう。

CSSアニメーションの基本を理解する
@keyframesを使って残像効果を作成する
残像効果を適用する要素にアニメーションを指定する

それぞれのステップを順に見ていきましょう。

○CSSアニメーションの基本を理解する

CSSアニメーションは、ウェブページ上の要素に動きを与えるための機能です。

アニメーションは、@keyframesというキーワードを使って定義し、対象となる要素に適用することで実現できます。

基本的なCSSアニメーションの書き方は次の通りです。

@keyframes アニメーション名 {
  0% {
    /* 開始時の状態 */
  }
  100% {
    /* 終了時の状態 */
  }
}

対象要素 {
  animation: アニメーション名 アニメーション時間;
}

○@keyframesを使って残像効果を作成する

次に、残像効果を作成するために@keyframesを使ってアニメーションを定義しましょう。

簡単な残像効果のサンプルコードです。

@keyframes afterimage {
  0% {
    transform: translateX(0);
    opacity: 1;
  }
  100% {
    transform: translateX(200px);
    opacity: 0;
  }
}

このコードでは、要素が右に200px移動する際に、透明度が1から0に変化するアニメーションを定義しています。

これにより、要素が移動しながら徐々に消えていく残像効果が実現されます。

○残像効果を適用する要素にアニメーションを指定する

最後に、残像効果を適用したい要素に対して、作成したアニメーションを指定します。

<div>要素に上記で定義した残像効果を適用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    @keyframes afterimage {
      0% {
        transform: translateX(0);
        opacity: 1;
      }
      100% {
        transform: translateX(200px);
        opacity: 0;
      }
    }

    div {
      width: 50px;
      height: 50px;
      background-color: red;
      animation: afterimage 2s;
    }
  </style>
</head>
<body>
  <div></div>
</body>
</html>

これで、残像効果が実現されます。

表示された赤い四角が右に移動しながら、徐々に透明になって消えていく様子が確認できるでしょう。

●応用例とサンプルコード

残像効果は、さまざまな応用が可能です。

応用例とサンプルコードをいくつか紹介します。

○複数の要素に残像効果を適用する

まず、複数の要素に残像効果を適用する方法を見てみましょう。

このアプローチでは、複数の四角形が画面上で動き、それぞれが滑らかに消えていく様子を表現します。

この効果は、特にスライドショーやアニメーションバナーにおいて有効で、動きのある要素を際立たせるのに役立ちます。

コードでは、CSSの @keyframes を用いてアニメーションを定義し、各四角形に対して適用しています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    @keyframes afterimage {
      0% {
        transform: translateY(0);
        opacity: 1;
      }
      100% {
        transform: translateY(100px);
        opacity: 0;
      }
    }

    .box {
      width: 50px;
      height: 50px;
      background-color: red;
      animation: afterimage 2s;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <div class="box"></div>
  <div class="box"></div>
  <div class="box"></div>
</body>
</html>

このコードでは、3つの赤い四角がそれぞれ縦に移動しながら残像効果が適用されます。

○連続的な残像効果を作成する

続いて、連続的な残像効果を作成する例を紹介します。

この例では、一つの四角形が繰り返し上下に移動し、その動きが連続して見えるようになっています。

この種のアニメーションは、動的なインターフェースやローディングインジケーターに適しており、視覚的な興味を刺激するのに有効です。

CSSの infinite プロパティを使用することで、アニメーションを無限に繰り返すことができます。

<!DOCTYPE html>
<html lang="ja">
<head>
  <style>
    @keyframes afterimage {
      0%, 100% {
        transform: translateY(0);
        opacity: 1;
      }
      50% {
        transform: translateY(100px);
        opacity: 0;
      }
    }

    .box {
      width: 50px;
      height: 50px;
      background-color: red;
      animation: afterimage 2s infinite;
    }
  </style>
</head>
<body>
  <div class="box"></div>
</body>
</html>

このコードでは、赤い四角が繰り返し上下に移動しながら残像効果が適用されます。

infiniteを指定することで、アニメーションが無限に繰り返されるようになります。