Intento hacer que el botón cambie de color usando el desplazamiento y la animación. Pero, cuando la animación se repite, el color del botón vuelve a la versión básica. ¿Cómo puedo arreglarlo? ¿Hay alguna propiedad css para hacerlo? ¿O un paquete de reglas? ¿O tal vez tengo que ir a JS y escribir algo de código?
#launch-button { width: 440px; height: 100px; margin-top: 75%; margin-left: 15%; border-radius: 45px; border-color: rgb(255, 255, 255); } #launch-button:hover { animation-name: change-background; animation-duration: 0.75s; animation-delay: 0s; animation-iteration-count: 1; animation-timing-function: ease-in; } @keyframes change-background { to {background-color: rgba(26, 198, 250, 0.5);} } #launch-button { width: 440px; height: 100px; margin-top: 75%; margin-left: 15%; border-radius: 45px; border-color: rgb(255, 255, 255); } #launch-button:hover { animation: forwards; animation-name: change-background; animation-duration: 0.75s; animation-delay: 0s; animation-iteration-count: 1; animation-timing-function: ease-in; } @keyframes change-background { to {background-color: rgba(26, 198, 250, 0.5);} } <button type="button" id="launch-button">Hello, world!</button> Todo lo que se necesitaba aquí es animation: forwards; . Mantiene el botón como último estado de la animación sin resetearlo.
Quizás ?? No estoy seguro de haberte entendido bien, pero si te refieres a establecer un tiempo de espera para que tu animación dure unos segundos en particular, puedes lograrlo de esta manera. Hágamelo saber.
$(document).ready(function(){ $('#launch-button').hover(function(){ $("#launch-button").css("background-color", "rgba(26, 198, 250, 0.5)"); setTimeout(function() { $("#launch-button").css("background-color", "rgb(255, 255, 255)"); }, 5000); }); }); #launch-button { width: 440px; height: 100px; margin-top: 0%; margin-left: 15%; border-radius: 45px; border-color: rgb(255, 255, 255); } <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <button id="launch-button"> </button>