El color de un objeto oscila entre el rojo suave y el azul, utilizando una animación de fotogramas clave.
Código sencillo mínimo (demostración de Codepen) :
#box { width: 100px; height: 100px; background-color: #ffcccc; animation: cycleColor 2s infinite linear; transition: background-color .2s; } #box:hover { animation-play-state: paused; background-color: yellow; } @keyframes cycleColor { 0% { background-color: #ffcccc; } 50% { background-color: #ccccff; } } <div id='box'></div>Esto generalmente no funciona, presumiblemente porque una animación de fotograma clave no permitirá un cambio temporal, incluso cuando esté en pausa.
En cambio, puedo eliminar totalmente la animación al pasar el mouse, pero luego no puede reanudarse sin problemas desde donde se detuvo.
También intenté agregar y eliminar clases al pasar el mouse, pero eso no resolvió este problema.
¿Hay una solución CSS o JS?
Use box-shadow para crear una capa adicional
#box { width: 100px; height: 100px; background-color: #ffcccc; animation: cycleColor 2s infinite linear; transition: box-shadow .2s; } #box:hover { animation-play-state: paused; box-shadow: 0 0 0 100vmax inset yellow; } @keyframes cycleColor { 0% { background-color: #ffcccc; } 50% { background-color: #ccccff; } } <div id='box'></div>Un poco de un enfoque hacky:
#box { width:100px; height:100px; background-color: #ffcccc; animation: cycleColor 2s infinite linear; transition: background-color .2s ease; position: relative; } #box:hover { animation-play-state: paused; } #box::after { position: absolute; width: 100%; height: 100%; content: ''; display: block; background: yellow; opacity: 0; transition: opacity 0.3s ease; } #box:hover::after { opacity: 1; } @keyframes cycleColor { 0% { background-color: #ffcccc; } 50% { background-color: #ccccff; } } <div id='box'></div>