How can I animate multiple radial gradients clockwise in a div?

Question

I have the following codes:

HTML

<header class="hero">
  <section class="hero-text-container">
    <!--Content Here-->
  </section>

  <figure class="hero-figure">
    <!--Image Here-->
  </figure>
</header>

CSS

.hero {
  background-image: radial-gradient(ellipse 30% 100% at -4% 5%, #ce0058, transparent),
    radial-gradient(ellipse 100% 75% at 0% 0%, #cf4520, #460702, transparent),
    radial-gradient(ellipse 100% 100% at 100% 100%, black, black);

  display: flex;
  width: 100%;
  max-width: 100vw;
  justify-content: center;
  align-items: stretch;
  text-align: justify;
  flex-wrap: wrap;
  margin: 0 auto;
  border-bottom: 2px solid #eee;

  animation-name: colors-circulating;
  animation-duration: 5s;
  animation-timing-function: ease-in-out;
  animation-iteration-count: 3;
}

I deleted HTML code for shortening but it's implemented.

The CSS above is styling the div with a black bg, and a 2 radial gradients of brick brown & hot pink. The gradients are located originally near the div's top left corner. See the full Implementation here:Hero Banner of a website I'm working on

I want to animate the gradients to move clockwise from the top left => top right => bottom right => bottom left, so I wrote this code:

@keyframes colors-circulating {
  0%, 100% {
    background: radial-gradient(
        ellipse 30% 100% at -4% 5%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 0% 0%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  25% {
    background: radial-gradient(
        ellipse 30% 100% at 96% 5%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 100% 0%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  50% {
    background-image: radial-gradient(
        ellipse 30% 100% at 96% 105%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 100% 100%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }

  75% {
    background-image: radial-gradient(
        ellipse 30% 100% at -4% 105%,
        #ce0058,
        transparent
      ),
      radial-gradient(
        ellipse 100% 75% at 0% 100%,
        #cf4520,
        #460702 60%,
        transparent
      ),
      radial-gradient(ellipse 100% 100% at 100% 100%, black, black);
  }
  }

Now the problem is, this code is showing 4 sharp images without any smooth animation. How can I make the gradients move smoothly?

I saw the following solutions, but unfortunately none of them worked for me:

• How to apply multiple css radial gradients to a single element
• Animate a div background image
• How to animate a radial-gradient using CSS?
• CSS animation not smooth with radial-gradient background
• CSS-Animation with two radial gradients moving/spinning inside the clipped mask png

I know maybe my implementation is not so correct, I am really doing my best.

How can I implement the idea I explained above using CSS &/or vanilla JS?

Answer 1

Easiest way to achieve this is to stack two elements in a positioned container, one with your content and one as the background. Absolutely position the two contained so they stack and set the fron to a higher z-index with a transparent background. Oversize the background and offset it so the corners won't show, hide overflow with the container, then just rotate the entire background element.

.contain {
  position: relative;
  width: 80px;
  height: 80px;
  overflow: hidden;
}

.contain>div {
  position: absolute;
}

div.front {
  width: 80px;
  height: 80px;
  background: transparent;
  z-index: 1;
  border: solid 2px blue;
}

div.rear {
  width: 200px;
  left: -50px;
  top: -50px;
  height: 200px;
  background-image: radial-gradient(at bottom left, blue, red);
  border: red solid 2px;
  animation: spin 10s linear infinite;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

<div class="contain">
  <div class="front">With all your text etc</div>
  <div class="rear"></div>
</div>

Demo: https://jsfiddle.net/7om4vcpg/