CSS animation not smooth with radial-gradient background

Question

I am trying to create a pulsating circular background with smooth edges. For the circle with smooth edges I am using this CSS code:

background: radial-gradient(black, black, transparent, transparent);

Using my code below works well to animate the background-color. However, as soon as I replace the background-color with this radial-gradient background the animation jumps and is no longer smooth. The behavior is consistent over multiple Browsers. This is a minimal working example of the issue I am having:

.global {
  background: lightskyblue;
}

.silver {
  // background: radial-gradient(black, black, transparent, transparent);
  animation: pulse 3s infinite;
}

@keyframes pulse {
  0%,
  100% {
    // background-color: black;
    background: radial-gradient(black, transparent, transparent, transparent);
  }
  50% {
    // background-color: white;
    background: radial-gradient(black, black, transparent, transparent);
  }
}

<body class="global">
  <img src="pngwave.png" alt="test" class="silver" />
</body>

I have found this Stackoverflow question which is similar but did not help me solve my problem.

Temani Afif · Accepted Answer · 2020-04-19 13:56:56Z

3

You need to animate the background-size

.box {
  width: 200px;
  height: 200px;
  background: radial-gradient(farthest-side,black, transparent) center no-repeat;
  animation:pulse 2s linear infinite alternate;
}
@keyframes pulse{
  from {
    background-size:50% 50%;
  }
  to {
    background-size:100% 100%;
  }
}

<div class="box"></div>

answered Apr 19, 2020 at 13:56

Temani Afif

280k30 gold badges379 silver badges504 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

JRsz Over a year ago

Actually I have another very related problem: Is it possible to do this with the actual background-color? The reason is that the element I am working with has a background image and background replaces the background-image while background-color works well with a background-image.

Temani Afif Over a year ago

@JRsz use multiple background: jsfiddle.net/xr3h52od

Collectives™ on Stack Overflow

CSS animation not smooth with radial-gradient background

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related