El siguiente código es parte de mi código:

.myBox:hover::after {
   animation-name: underline;
   animation-duration: 350ms;
   animation-fill-mode: forwards;
}

@keyframes underline {
   from { width: 0; }
   to { width: 100%; }
}

Funciona bien, pero quiero hacerlo al revés cuando se complete la animación, quiero decir que cuando haya terminado, width debería ser 0 nuevamente. De hecho, para esta parte, quiero hacerlo cuando mi elemento no esté suspendido. ¿Qué propiedad me puede ayudar?

1
Ali Bahaari 9 sep. 2018 a las 16:41

3 respuestas

La mejor respuesta

Debe usar alternativo y ejecutar 2 iteraciones de la animación:

.box {
   height:200px;
   background:red;
   animation: underline 500ms alternate 2 forwards;
}

@keyframes underline {
   from { width: 0; }
   to { width: 100%; }
}
<div class="box">

</div>

O considere el uso de transición si desea la efecto sobre flotar:

.box {
  height: 200px;
  background: red;
  width: 0;
  transition: 500ms;
}

body:hover .box {
  width: 100%;
}
<div class="box">

</div>
2
Temani Afif 9 sep. 2018 a las 14:11

Puede especificar varios valores para las animaciones en lugar de from y to usando el porcentaje:

@keyframes underline {
    0%, 100% { width: 0; }
    50% { width: 100%; }
}

Se puede encontrar información más detallada aquí.

2
Rom 9 sep. 2018 a las 14:01
.myBox:hover::after {
   animation-name: underline infinite;
   animation-duration: 350ms;
   animation-fill-mode: forwards;
}

@keyframes underline {
   from { width: 0; }
   to { width: 100%; }
}

Eres infinita para esto

-1
Oakar 9 sep. 2018 a las 14:29