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);
}
}
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.