Creating Animated Wave Circles Using CSS: A Step-by-Step Guide

Animated wave circles in CSS are a visually engaging and dynamic design element that can be implemented on webpages to add a touch of interactivity and aesthetic appeal. These animations involve creating a series of concentric circles that appear to ripple and move like waves, giving the illusion of motion and depth. The animation effect can be achieved by utilizing CSS animations and keyframes.

Animation Timing and Easing:

Set animation timing and easing functions to control the pace and style of the animation. For a wave effect, you might use easing functions that mimic the natural motion of waves.

Applying Animation:

Apply the defined animation to the circle elements within your HTML. This is typically done using the animation property in CSS.

Repeat and Infinite Animations:

You can make the animation repeat or run infinitely by adjusting the animation properties. This can create a continuous and mesmerizing wave effect.

Repeat and Infinite Animations:

You can make the animation repeat or run infinitely by adjusting the animation properties. This can create a continuous and mesmerizing wave effect.

Here is an example

Source Code :

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Wave Effect in CSS</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="wave">
      <div style="--i: 0"></div>
      <div style="--i: 1"></div>
      <div style="--i: 2"></div>
      <div style="--i: 3"></div>
      <div style="--i: 4"></div>
      <div style="--i: 5"></div>
      <div style="--i: 6"></div>
      <div style="--i: 7"></div>
      <div style="--i: 8"></div>
      <div style="--i: 9"></div>
      <div style="--i: 10"></div>
      <div style="--i: 11"></div>
      <div style="--i: 12"></div>
      <div style="--i: 13"></div>
      <div style="--i: 14"></div>
      <div style="--i: 15"></div>
      <div style="--i: 16"></div>
      <div style="--i: 17"></div>
      <div style="--i: 18"></div>
      <div style="--i: 19"></div>
    </div>
  </body>
</html>

css/style.css

* {
  margin: 0;
  padding: 0;
}

body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  background-color: #1e272e;
}

.wave {
  position: relative;
  width: 500px;
  height: 500px;
  transform-style: preserve-3d;
  transform: perspective(800px) rotateX(60deg);
}

.wave div {
  position: absolute;
  display: block;
  border: 10px solid #fff;
  box-shadow: 0 8px 0 #ccc;
  border-radius: 50%;
  animation: wave 3s ease-in-out infinite;
  top: calc(var(--i) * 10px);
  left: calc(var(--i) * 10px);
  bottom: calc(var(--i) * 10px);
  right: calc(var(--i) * 10px);
  animation-delay: calc(var(--i) * 0.1s);
}

@keyframes wave {
  0%,
  100% {
    transform: translateZ(-120px);
  }
  50% {
    transform: translateZ(120px);
  }
}

The provided CSS code creates an animated wave effect using concentric circles. Let's break down the code and explain how it works:

The .wave class defines the container for the wave effect. It's given a width and height of 500px, and the transform-style: preserve-3d property is used for 3D transformations. The perspective(800px) creates a 3D perspective effect, and rotateX(60deg) tilts the container along the X-axis.

Each circle element inside the .wave container is styled with a white border, a shadow, and circular borders. It's positioned absolutely within the container.

The animation property applies the wave animation defined later. The circles are positioned diagonally using top, left, bottom, and right properties, which are calculated based on a custom property --i that varies for each circle. The animation-delay property creates a sequential delay for each circle's animation.

Overall, this CSS code creates an intriguing animated wave of circles that appear to ripple and move in 3D space, adding a visually appealing and dynamic touch to your webpage's design.

Output

Live Preview

Overall, animated wave circles in CSS can be a captivating addition to a webpage's design. They can be used for various purposes, such as highlighting certain sections of a page, drawing attention to specific elements, or simply enhancing the overall visual experience. By combining CSS animations and creative styling, you can create dynamic and visually appealing wave circle animations that contribute to a more engaging user interface.