Reutilice la animación CSS en dirección inversa(¿restableciendo el estado?)

css3 animation

Question

He usado dos animaciones de fotogramas clave en CSS. Uno se mueve de izquierda a derecha y el otro usa exactamente los mismos valores, pero al revés.

@keyframes moveLeft
{
    from {transform: translate3d(50px, 0, 0);}
    to   {transform: translate3d(0px, 0, 0);}
}


@keyframes moveRight
{
    from {transform: translate3d(0px, 0, 0);}
    to   {transform: translate3d(50px, 0, 0);}
}

Sin embargo, me pregunto si es posible usar solo una animación de fotogramas clave. pero tan pronto como agrego animation-direction: reverse , la animación solo se reproduce una vez. Probablemente guarda la información que se ha usado una vez antes. Entonces: ¿puedo restablecer esta información de alguna manera? ¿O hay alguna posibilidad de usar una animación dos veces en diferentes direcciones? (sin usar JS)

http://jsfiddle.net/vrhfd66x/

Answer 1

No, no hay forma de reiniciar la animación usando solo CSS. Tendría que usar JavaScript para eliminar la animación del elemento y luego volver a aplicarla al elemento (después de un retraso) para que se reinicie.

Lo siguiente es lo que dice la especificación de animación CSS3 del W3C (en un contexto diferente, pero el punto también debería ser válido para este caso):

Tenga en cuenta también que cambiar el valor de ''animation-name'' no necesariamente reinicia una animación (por ejemplo, si se aplica una lista de animaciones y se elimina una de la lista, solo esa animación se detendrá; las otras animaciones continuarán). Para reiniciar una animación, debe eliminarse y luego volver a aplicarse.

^{el énfasis es mío}

Este artículo de trucos CSS de Chris Coiyer también indica lo mismo y proporciona algunas soluciones JS para reiniciar una animación. ( Nota: El artículo tiene una referencia al dabblet de Oli que afirma que alterar las propiedades como la duración, el recuento de iteraciones hace que se reinicie en Webkit, pero parece estar desactualizado ya que ya no funcionan en Chrome).

Resumen:

Si bien ya ha mencionado lo siguiente, voy a repetirlo por completo:

• Una vez que se aplica una animación en el elemento, permanece en el elemento hasta que se elimina.
• UA hace un seguimiento de la animación que se encuentra en el elemento y si se ha completado o no.
• Cuando aplica la misma animación en :checked (aunque con una dirección diferente), el UA no hace nada porque la animación ya existe en el elemento.
• El cambio de posiciones (instantáneo) al hacer clic en la casilla de verificación se debe a la transform que se aplica dentro del :checked selector seleccionado. La presencia de la animación no hace ninguna diferencia.

Soluciones:

Como puede ver en el fragmento a continuación, lograr esto con una sola animación es bastante complejo incluso cuando se usa JavaScript.

var input = document.getElementsByClassName("my-checkbox")[0];

input.addEventListener(''click'', function() {
  if (this.checked) {
    this.classList.remove(''my-checkbox'');
    window.setTimeout(function() {
      input.classList.add(''anim'');
      input.classList.add(''checked'');
    }, 10);
  } else {
    this.classList.remove(''anim'');
    window.setTimeout(function() {
      input.classList.remove(''checked'');
      input.classList.add(''my-checkbox'');
    }, 10);
  }
});

input {
  transform: translate3d(50px, 0, 0);
}
.my-checkbox {
  animation: moveLeft 1s;
  animation-direction: reverse;
}
.checked {
  transform: translate3d(0px, 0, 0);
}
.anim{
  animation: moveLeft 1s;
}
@keyframes moveLeft {
  from {
    transform: translate3d(50px, 0, 0);
  }
  to {
    transform: translate3d(0px, 0, 0);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
<input type="checkbox" class="my-checkbox">

Entonces, la mejor opción (si desea apegarse a las animaciones CSS) es usar dos animaciones diferentes .

Alternativamente, también puedes echar un vistazo al comentario de Marcelo. Si el caso de uso real es exactamente el que se proporciona en el violín, entonces la transition sería suficiente y no se requiere animation . Las transiciones pueden funcionar tanto en sentido directo como inverso por naturaleza y, por lo tanto, sería una apuesta más segura.