El Codepen vinculado a continuación es donde actualmente estoy atascado.
function startHover(e) { btn.classList.add("btnPlaying") } function removeHover(e) { btn.classList.remove("btnPlaying"); } const btn = document.querySelector('.btn') btn.addEventListener("mouseenter", startHover); btn.addEventListener('transitionend', removeHover); .btn { margin-top: 10rem; padding: 20px 100px; background-color: rgb(255, 204, 3); border-radius: 10px; border-style: none; box-shadow: 0px 0px 10px black; color: blue; border: 4px solid rgb(53, 106, 188); transition: all 1.07s ease; } .btnPlaying { transform: scale(1.1); } <button class="btn">Play!</button>https://codepen.io/TerrellsCode/pen/zYEyORB
El botón crece y se encoge según lo previsto, pero solo lo hace una vez. Busque cualquier sugerencia sobre cómo hacer que esta animación de crecimiento/reducción se repita infinitamente mientras el usuario pase el cursor sobre el botón. Gracias
Sin necesidad de JavaScript. Con CSS Keyframes puedes crear y ejecutar animaciones. Alterne el animation-play-state con el selector :hover para iniciar y pausar la animación.
@keyframes grow-shrink { from { transform: scale(1); } to { transform: scale(1.1); } } .btn { margin-top: 10rem; padding: 20px 100px; background-color: rgb(255, 204, 3); border-radius: 10px; border-style: none; box-shadow: 0px 0px 10px black; color: blue; border: 4px solid rgb(53, 106, 188); animation-name: grow-shrink; animation-duration: 1.07s; animation-timing-function: ease; animation-fill-mode: backwards; animation-direction: alternate; animation-play-state: paused; animation-iteration-count: infinite; } .btn:hover { animation-play-state: running; } <button class="btn">Play!</button>No necesita javascript para crear dicha animación, use fotogramas clave css y animación infinita.
.btn { margin-top: 10rem; padding: 20px 100px; background-color: rgb(255,204,3); border-radius: 10px; border-style: none; box-shadow: 0px 0px 10px black; color: blue; border: 4px solid rgb(53,106,188); } .btn:hover { animation: btnPlaying 1s infinite; } @keyframes btnPlaying { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }