A continuación puedes ver los fotogramas clave. Es un gradiente que se supone que simula una explosión. Cuando se reproduce la animación, no se desvanece en el siguiente fotograma clave. Simplemente cambia instantáneamente al siguiente fotograma clave. Probé ciertas propiedades de transición en la clase correspondiente, nada de lo que probé parece funcionar. También probé algunas propiedades de animación. Ellos tampoco funcionan.
@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 es animable pero solo discretamente. Entonces, si bien no puede animar suavemente entre las imágenes de fondo, lo que puede hacer en su caso es usar la opacidad en los pseudo elementos antes y después para desvanecer una imagen de fondo mientras la siguiente se desvanece.
En este fragmento, la escala permanece con el elemento, los fondos van y vienen en los pseudo elementos.
.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>Obviamente querrá modificar las dimensiones de los elementos para adaptarlos a su caso particular.