25

CSSアニメーションで表現する永遠に動く波

この記事では、CSSのアニメーション機能を使って永遠に動き続ける波を実装する方法を解説します。SVGとキーフレームアニメーションを組み合わせ、リアルな波の動きを再現しています。また、メディアクエリを用いたレスポンシブ対応も行っています。CSSの表現力を活用し、自然な動きのあるコンテンツを実装するテクニックが学べます。

Website

使用技術

  • CSSアニメーション: キーフレームを使った要素の移動
  • SVGとCSSの連携: SVG要素にCSSアニメーションを適用
  • メディアクエリ: 画面サイズに応じたレイアウト変更

制作意図

  • CSSアニメーションの表現力を学ぶ
  • 自然な動きの再現にチャレンジする
  • レスポンシブデザインの実践

こだわりポイント

  • 海の波をリアルに表現
  • 無限ループで永続的な動きを実現
  • 画面サイズに応じた調整

CSSだけで永遠に動き続ける波を再現いたします🏄🌊

CSS

このCSSコードは、ウェブページに波のアニメーションを追加するためのものです。以下にその解説を記載します。

CSSクラスの説明

  1. .waves: このクラスは、波のアニメーションを表示する領域を定義します。幅は100%で、高さはビューポートの高さの15%です。最小高さは100px、最大高さは150pxです。

  2. .content: このクラスは、ページのコンテンツを表示する領域を定義します。高さはビューポートの高さの20%です。

  3. .parallax > use: このセレクタは、SVGのuse要素に対してアニメーションを適用します。アニメーションはmove-foreverという名前で、25秒間で完了し、無限に繰り返されます。

  4. @keyframes move-forever: このキーフレームアニメーションでは、要素を水平方向に移動させます。開始時点では-90pxの位置から始まり、終了時点では85pxの位置に移動します。

  5. @media (max-width: 768px): このメディアクエリは、画面幅が768px以下の場合に適用されます。.wavesの高さが40pxに、.contentの高さがビューポートの高さの30%に変更されます。

以上が、このCSSコードの解説です。このコードを使用することで、ウェブページに美しい波のアニメーションを追加することができます。このコードを活用して、ユーザーに魅力的な体験を提供してみてください。