How to smoothly transition between keyframes?

Question

Below you can see the keyframes. It's a gradient that is supposed to simulate an explosion. When the animation plays it doesn't fade into the next keyframe. It just instantly changes to the next keyframe. I've tried certain transition properties on the regarding class, nothing i've tried seems to work. I have tried some animation properties as well. They don't work either.

@keyframes Explosion {
      0% {
      }
      20% {
        background-image: radial-gradient(
          rgba(255, 255, 255, 1) 10%,
          rgba(246, 237, 0, 0) 20%,
          rgba(250, 0, 0, 0) 60%
        );
        transform: scale(2);
      }
      40% {
        background-image: radial-gradient(
          rgba(255, 255, 255, 1) 10%,
          rgba(246, 237, 0, 1) 20%,
          rgba(250, 0, 0, 0.3) 60%
        );
        transform: scale(2);
      }
      60% {
        background-image: radial-gradient(
          rgba(255, 255, 255, 1) 10%,
          rgba(246, 237, 0, 1) 20%,
          rgba(250, 0, 0, 1) 60%
        );
        transform: scale(2);
      }
      100% {
        background-image: radial-gradient(
          rgba(255, 255, 255, 1) 60%,
          rgba(246, 237, 0, 1) 65%,
          rgba(250, 0, 0, 1) 70%
        );
        transform: scale(2.3);
      }
    }

@Apollo79 Well i have 3 questions then. Why do the keyframes work? Why did i see on youtube different ways people animated the gradient on hover (with smooth transitions)? And how else would i approach animating a radial gradient? — Roy Croezen, Jun 12 '22 at 18:24
OK, let's correct my comment, you can animate `background-image`. But not smooth. As you said, it just changes to the next keyframe. Secondly, I don't know what you saw on youtube, but I just know the option to animate `background-position` or `background-size`. BUT, you can use css variables to animate radial-gradients, have a look at this answer: https://stackoverflow.com/a/66383730/17797907 — Apollo79, Jun 12 '22 at 19:05

A Haworth · Answer 1 · 2022-06-13T06:17:47.590

background-image is animatable but only discretely. So while you cannot smoothly animate between background images what you can do in your case is use opacity on before and after pseudo elements to fade out one background image while the next one fades in.

In this snippet the scaling remains with the element, the backgrounds come and go on the pseudo elements.

.container {
  background-color: black;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
}

.explosion {
  width: 50vmin;
  height: 50vmin;
  position: relative;
  animation: Explosion 5s linear infinite;
}

.explosion::before,
.explosion::after {
  content: '';
  animation: var(--animation) 5s linear infinite;
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.explosion::before {
  --animation: Explosionb;
}

.explosion::after {
  --animation: Explosiona;
}

@keyframes Explosion {
  0% {}
  20%,
  40%,
  60% {
    transform: scale(2);
  }
  100% {
    transform: scale(2.3);
  }
}

@keyframes Explosionb {
  0% {
    opacity: 0;
  }
  20% {
    background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 0) 20%, rgba(250, 0, 0, 0) 60%);
    opacity: 1;
  }
  40% {
    opacity: 0;
  }
  41% {
    background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 1) 20%, rgba(250, 0, 0, 1) 60%);
    opacity: 0;
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes Explosiona {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0;
  }
  21% {
    background-image: radial-gradient( rgba(255, 255, 255, 1) 10%, rgba(246, 237, 0, 1) 20%, rgba(250, 0, 0, 0.3) 60%);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  60% {
    opacity: 0;
  }
  61% {
    background-image: radial-gradient( rgba(255, 255, 255, 1) 60%, rgba(246, 237, 0, 1) 65%, rgba(250, 0, 0, 1) 70%);
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

<div class="container">
  <div class="explosion"></div>
</div>

Obviously you will want to alter the elements' dimensions to suit your particular case.

How to smoothly transition between keyframes?

1 Answers1