CSSで光が右から左に流れるアニメーション効果を作成する方法

Posted on by

ウェブサイトに動きのあるデザインを取り入れたいと考えたことはありませんか？
シンプルな要素に光が流れるようなアニメーションを追加することで、
注目度を高めたり、洗練された印象を与えることができます。
この記事では、CSSのグラデーションとアニメーションを使って、
光が右から左に流れるようなエフェクトを実装する方法を解説します。

基本的な設定

まずは、光が流れる要素を作成し、::before疑似要素を使って光の部分を表現します。
この疑似要素を使うことで、アニメーションやスタイルを特定の要素に追加しやすくなります。

以下は基本的なCSSの設定です。

.element {
  position: relative;
  overflow: hidden; /* アニメーションが要素からはみ出さないように設定 */
}

.element::before {
  content: "";
  display: block;
  width: 100px; /* 光の幅を指定 */
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%; /* アニメーションの開始位置を右端に設定 */
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
}

グラデーションを使用して光を表現

光の部分はbackgroundプロパティを使用してグラデーションで表現します。
linear-gradientを使用して、左から右に向かって中央にハイライトが現れるように設定します。

background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);

この設定では、グラデーションの両端が透明（rgba(255,255,255,0)）で、
中央がやや白く光る部分（rgba(255,255,255,0.5)）となっています。
これにより、光の動きが強調されます。

アニメーションの設定

光が右から左に流れるアニメーションを作成するためには、@keyframesを使用します。
以下のコードでは、光が右からスタートして左へ流れるように定義しています。

@keyframes twinkleAnime {
  0% {
    left: 100%; /* アニメーション開始時は右端に光が位置する */
    opacity: 1; /* 光が完全に見える */
  }
  50% {
    left: 50%; /* アニメーションの途中で光が中央に来る */
    opacity: 0.5; /* 光の透明度をやや下げる */
  }
  100% {
    left: 0; /* アニメーション終了時に光が左端に到達する */
    opacity: 0; /* 光が消える */
  }
}

leftプロパティを使って、光が要素内を移動するようにし、
opacityで光がだんだん消える効果を与えています。

アニメーションを適用する

アニメーションを要素に適用するには、hoverなどのイベントに基づいて
アニメーションをトリガーします。
hover時にアニメーションがスタートし、繰り返し動くようにinfiniteを指定します。

.element:hover::before {
  animation: twinkleAnime 1.5s ease-in-out infinite; /* 繰り返しアニメーション */
}

animationプロパティでは、次のパラメータを設定しています：

  • twinkleAnime: アニメーション名
  • 1.5s: アニメーションの時間
  • ease-in-out: 緩やかなアニメーションの開始と終了
  • infinite: 繰り返し続ける設定

完成したコード

以下が完成したCSSコードです。
これをHTMLファイルに組み込むことで、光が右から左に流れる効果を実現できます。

@keyframes twinkleAnime {
  0% {
    left: 100%;
    opacity: 1;
  }
  50% {
    left: 50%;
    opacity: 0.5;
  }
  100% {
    left: 0;
    opacity: 0;
  }
}

.element {
  position: relative;
  overflow: hidden;
}

.element::before {
  content: "";
  display: block;
  width: 100px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 100%;
  background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%);
  opacity: 0;
}

.element:hover::before {
  animation: twinkleAnime 1.5s ease-in-out infinite;
}

まとめ

この方法を使うと、ウェブサイトの要素にシンプルかつ美しい光のアニメーション効果を追加できます。
光が右から左に繰り返し流れるデザインは、ボタンやリンク、見出しなど、
注目を集めたい場所に活用するのに最適です。
試してみて、あなたのウェブサイトに新しい魅力を加えてください。