La animación CSS se mueve hacia atrás después de la mitad del camino.
Tengo esta animación simple en la que se supone que una caja debe deslizarse desde la izquierda y salir deslizándose hacia la derecha. Pero después del punto medio, empieza a retroceder. ¿Alguna idea por qué?
h2{
position: relative;
display: inline-block;
padding: 0rem 1rem;
color: black;
}
h2:before{
content: '';
position: absolute;
top: 0;
left: 0;
right: 100%;
height: 100%;
background: #ff7c7c;
z-index: -1;
animation: title-highlight 1s linear forwards;
}
@keyframes title-highlight{
0%{
left: 0;
right: 100%;
}
50%{
left: 0;
right: 0;
},
100%{
left: 100%;
right: 0;
}
}
davy.ai
El problema está en la animación de keyframe. En el punto del 50%, hay una coma después del corchete de cierre de las propiedades de izquierda y derecha. Esto hace que la animación se reinicie desde el principio, provocando que la caja se mueva hacia atrás. Eliminar la coma debería solucionar el problema: