CODEWITHSUNDEEP
htmlcsscss-animations
AnApprentice
AnApprentice

Reputation: 110960

How to create a CSS Animation like a Shockwave

I'm working to create a CSS animation with a shockwave like effect as seen in this design:

enter image description here

My current attempts create a shockwave but the problem is the circle's inner is filled in, and does not have the desired stroke effect. This is what I current have:

current results

Here is my code:

  svg {
    border-radius: 50%;
    animation: pulse-bomb 4s 0s ease-out infinite;
  }

  @keyframes pulse-bomb {
    0% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 0px rgba(233,233,246, 0.2), 0 0 0px 0px rgba(233,233,246, 0);
      transform: scale(1);
    }
    10% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, .8), 0 0 12px 10px rgba(233,233,246, 0.2), 0 0 12px 14px rgba(233,233,246, 0);
      transform: scale(1.08);
    }
    60% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 100px rgba(233,233,246, 0.0), 0 0 0px 100px rgba(233,233,246, 0);
      transform: scale(0.96);
    }
    80% {
      box-shadow: 0 0 8px 6px rgba(233,233,246, 0), 0 0 0px 0 rgba(233,233,246, 0), 0 0 0px 0 rgba(233,233,246, 0);
      transform: scale(1);
    }
  }

Any ideas on how I can update my animation to not fill in the entire shockwave circle?

Upvotes: 0

Views: 3531

Answers (1)

Temani Afif
Temani Afif

Reputation: 272965

I would go with multiple radial-gradient and animate the background size of each one to obtain the needed effect

body {
  margin: 0;
  background: lightblue;
}

.box {
  width: 250px;
  height: 250px;
  margin: 20px auto;
  background:
    radial-gradient(
      transparent 21%, rgba(233,233,246, .8) 21%,
      rgba(233,233,246, .8) 22%,transparent 28%),
    radial-gradient(
      transparent 36%,rgba(233,233,246, .8) 40%,
      rgba(233,233,246, .8) 42%,transparent 50%),
    radial-gradient(
      transparent 60%,rgba(233,233,246, .8) 65%,
      rgba(233,233,246, .8) 66%,transparent 70%);
  background-size:0 0,0 0,0 0;
  background-position:center;
  background-repeat:no-repeat;
  animation:change 5s linear infinite;
}
@keyframes change{
  0% {
    background-size:0 0,0 0,0 0;
  }
  25% {
    background-size:0 0,0 0,30% 30%;
  }
  50% {
    background-size:10% 10%,40% 40%,60% 60%;
  }
  75% {
    background-size:100% 100%,100% 100%,100% 100%;
  }
  100% {
    background-size:100% 100%,100% 100%,100% 100%;
  }
}
<div class="box">
</div>

Upvotes: 3

Related Questions