Amazing CSS with ripple animation

Posted on October 27th, 2019

Do you know how to create an amazing css with ripple animation? This post will show you how to do it by Darkcode. To see how it works, just click on the button Run Pen below:

How to create a responsive navigation bar with css

Step 1: Add Html

<div class="container">
  <span class="ripple r1"></span>
  <span class="ripple r2"></span>
  <span class="ripple r3"></span>
  <span class="ripple r4"></span>
  <span class="ripple r5"></span>
  <span class="ripple r6"></span>

Step 2: Add CSS

body {
  margin: 0;
  padding: 0;
  background: #3498db;
.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotateX(70deg);
.ripple {
  position: fixed;
  top: 0;
  transform: translateX(-50%);

  width: 20px;
  height: 20px;
  border-radius: 50%;
  animation: ripple 4s linear infinite;
.r2 {
  animation-delay: 0.8s;
.r3 {
  animation-delay: 1.6s;
.r4 {
  animation-delay: 2.4s;
.r5 {
  animation-delay: 3.2s;
.r6 {
  animation-delay: 4s;

@keyframes ripple {
  from {
    border: 4px solid #8e44ad;
    background: #9b59b670;
  to {
    border: 0px solid #8e44ad;
    background: #9b59b670;
    width: 400px;
    height: 400px;
    top: 20px;
    opacity: 0;