Infinite Ripple Effect Animation using HTML & CSS

This is an infinite ripple effect animation made with HTML and CSS. No JavaScript is used. You can download the source code for free below.

In the HTML, I created 3 div elements. In the CSS, I set the border-radius to 50% so that they look like circles. I set the container at the center of the screen. The animation key frames has transform and opacity properties. Initially, they are scale(0.1) and 1. At the end of animation they become scale(1) and 0.

The CSS infinite ripple effect animation uses 3 circles. Each circle has a different animation delay. The first one has 0ms, the second one has 500ms, and the third one has 1s. The common thing among them is key frames. All of them have the same initial and final values.

The background-color of each circle is aqua. You can change it according to your requirement. The position of the container is relative and the circle is absolute. This is because I want to arrange all the circles on top of each other.

Related:

Circular Progress Bar using CSS and JS

Final output:

If the video isn’t working, watch it on the YouTube.

Helpful links to understand the code:

Animations in CSS

Here is the source code:

ripple-animation.html:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Ripple Animation</title>
    <link rel="stylesheet" href="./ripple-animation-styles.css" />
  </head>
  <body>
    <div class="container">
      <div class="circle circle1"></div>
      <div class="circle circle2"></div>
      <div class="circle circle3"></div>
    </div>
  </body>
</html>

ripple-animation-styles.css:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  width: 7em;
  height: 7em;
  position: relative;
  margin-top: calc(50vh - 3.5em);
  margin-left: calc(50vw - 3.5em);
}

.circle {
  width: 100%;
  height: 100%;
  background-color: aqua;
  position: absolute;
  border-radius: 50%;
  animation: ripple-animation 1.5s infinite ease-out;
}

.circle1 {
  animation-delay: 0s;
}

.circle2 {
  animation-delay: 500ms;
}

.circle3 {
  animation-delay: 1s;
}

@keyframes ripple-animation {
  0% {
    transform: scale(0.1);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

Leave a Comment Cancel reply