Empresas
Empleos
  • Sobre nosotros
  • Soluciones
    • Publicación de vacantes
      Publica tu vacante y recibe candidatos calificados en 48h.
    • Evaluación de candidatos
      500+ pruebas técnicas y psicológicas, más anti-fraude.
    • Headhunting
      Búsqueda ejecutiva a la medida de principio a fin.
    • Nómina + EOR
      Dispersión de nómina y EOR en más de 15 países de LATAM.
  • Precios
  • Empleos

0

201
Vistas
How do you reverse a CSS animation (or CSS transition) at any point of the animation using vanilla JS?

Scenario:

on mouseover event (on hover), animation plays (Say animated image gets bigger). Then, on mouseout event, animation reverses (animated image shrinks seamlessly upon mouse not hovering on image). The animation reverses at any time the mouse exits the image space.

Constraints:

  • object in HTML file
  • animation CSS property (or CSS transition property) in CSS file
  • using mouseover and mouseout events on JS in JS file
  • using JS eventlistener function in JS file
about 4 years ago · Juan Pablo Isaza
2 Respuestas
Responde la pregunta

0

If you're using transition instead of animation this is relatively easy:

.hoverme {
  height: 100px;
  width: 100px;
  display: flex;
  justify-content: center;
  align-items: center;
  background: pink;
  transition: height 10s, width 10s;
}

.hoverme:hover {
  height: 300px;
  width: 300px;
}
<div class="hoverme">hover me</div>

about 4 years ago · Juan Pablo Isaza Denunciar

0

Checkout this,

.hoverme {
  padding: 50px;
  transition: transform .2s;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.hoverme:hover {
  transform: scale(1.5);
}
<img class="hoverme" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAYQAAACCCAMAAABxTU9IAAAAxlBMVEX/SBT+9fPvPSL98e//Rg//PQD++ff/r6D97On9RRb1QR3/NwABP1L/LwD/QgD/Qwj/hG75Qxr+4dn/f2n+5+H/oIr/moP+/f3/aUv+q5r28fDS1db/b1T/dVv+08n/emb+2NP/iXb/uqr/Wi7/SwT/bUb/gmT/ZUT+zMD/j3b/kX//UiH/xbni4eGBlp5YeISstrpviJHFycxQZnMAGDYAKUEgR1oAHzugq7AAMkiKkplmdYGWn6U7W2pMbnoyR1gAACgAABf0PUxhAAAD1UlEQVR4nO3c/3OaSBjHcfdgVxKCKApEk1iL12pqvTOmXE16d23//3/qdhGj+VLjzXTFqe/XTJxA8sPOfvLsAwSo1QAAAAAAAAAAAAAAAAAAAAAAAI6RK/2CbLhVD+U4uTIIfn/XTOI4Tt4P/cBvVD2ioxP6wageCaVSVXx5/WQY+NTDHoV+LYlS5XiaU3x6Ik2jxCWGvZFu0jEJOGLNMTl0koasenDHwQ1GY+U4T0IocnBU/zygGOwL5bUug+WcC/E0BtW5ZkmyLgy7wnk2+w884XwgBcvCRrwlAlMMOgVWJKtcP9lWB6Y9eyJq+1WP85cm29HWQjDd2hHjc46R7JHnY7V9MVqeM3S5jGGNW9NNeVsGq2KImixItvjNzvauvAzBcVQ2DKse7C/KrdW3L0brIDpvKQU7ZHvweiEsQxD1CV3BBrcRv94RVqI2B0g2yNHHnUNwvJgDJBtkM9q1DgSt2Q43TNZX7FSapurJxKtHuwasRxaEk/WxkZr+8ees9zgFdXFzM1cP+7wPhPDz6bPlVUtQF7ef8k/3j0JQ878+5/livR5x1myBvOw/zPgiPzu7u51vpKB693pf/uVCrUKou4Tw08nL8WrGe3/f6RD+MSEU64/5KEK4uyUEqzZCULOzu7PPX6ZK9C6mqVLzWU+oRa733fcIwSZ5tV6OdAr5v/qPXs3yr7OLm2+6AJQuj/xmulqhCMGKzRBE2usVC1FvkX///q1YhNRqHyHY8ygEPedlGtPFYl6uQWqjUROCFfLNQLzAnKI9PW0jBFt+EMIPEIIVhHAACOEAEMIB0CHs/C8dQrCESjgAsh2J53diE8JeEcIBMHdACvNYwk4xEIIVphKE2LUYCMEKKuEAyGb0wiNShLBXhHAACOEA/J97vwjBElMJhFAx+bZDJVRNh1BWgrPlBvnVzwjBilUIZprXKZjvNjIxPyt6NyFYUS5H+ggpS/rOQ1F06tfjjUgyvVUEQwg2LBuznvXED0blbal6vuMgaHTLTDyRTQI/LmqFEGyQb8xVVOGZ5/X9q0iZd+zoDHy3JidZcT3DUx+HsuYGJgWPEGwIh1kqVOe6eGeCfzVIhd5Kiluv5TBTmhOH5nZ4V9eCEiLm1ngLGqMsykblU5ly2B3042H5LhHZuOpmemv5cI4rL7N+POFJHRsamy+60xu6G6y2zAvx/I0t/ZtkAAAAAAA4YielqsdxlFqnp789d9oijT05eWH6N7SqHt8xaG3PQNdD1SM8Aq8UAqWwJ62XGkLZFaoe25E50d15rcUhEgAAAAAAAAAAAAAAAAAAAI7YfwZqP9bVk7iVAAAAAElFTkSuQmCC">

about 4 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Comercial
Legal
Términos y condiciones Política de privacidad
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomiéndame algunas ofertas
Necesito ayuda