javascript - standard - html5

Error de animación CSS en Safari

Question

Tengo una animación CSS con retraso y la detengo durante el retraso. Funciona como se esperaba en Firefox y Chrome, el "Hola" no se mueve. Sin embargo, en Safari, la animación salta al último fotograma. ¿Por qué y cómo solucionarlo por favor?

function test() {
  var timeout = 1000;
  setTimeout(function() {
    document.getElementById(''animation'').style.animationPlayState = ''paused'';
  }, timeout);
}

document.addEventListener("DOMContentLoaded", test);

#animation {
  animation: test 2s linear 2s;
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>

Si elimino la demora de 2 segundos, establezco la duración en 4 segundos y agrego un fotograma clave con transformación: ninguna, puedo hacer que este ejemplo simple funcione. Sin embargo, mi caso real tiene múltiples animaciones que están sincronizadas con retrasos.

Answer 1

El comportamiento de Safari solo tiene errores cuando el tiempo de espera se establece en un valor más pequeño que el retraso de la animación. Por lo tanto, una solución es establecer el estado inicial en paused través animation-play-state y luego controlarlo a través de JS, como se muestra a continuación:

function test() {
  let el = document.getElementById("animation");
  let timeout = 1000;
  
  // Get the delay. No luck with el.style.animationDelay
  let delay =
    window
      .getComputedStyle(el)
      .getPropertyValue("animation-delay")
      .slice(0, -1) * 1000;

  // Only resume and later pause when timeout is greater than animation delay
  if (timeout > delay) {
    el.style.animationPlayState = "running";
    setTimeout(function() {
      el.style.animationPlayState = "paused";
    }, timeout);
  }
}

document.addEventListener("DOMContentLoaded", test);

#animation {
  animation: test 2s linear 3s;
  animation-play-state: paused; /* Pause it right after you set it */
}

@keyframes test {
  to {
    transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>

Intenta diferentes valores de tiempo de espera para verlo funcionar. No puedo decir por qué esto está sucediendo. Parece un error para mí. Probado en OS X El Capitan 10.11.6 / Safari 11.0 (11604.1.38.1.7).

Demo de codepen

Answer 2

Esto no es una respuesta al problema. Sin embargo, si elimina el retraso de la animación, la pausa y el reinicio de la animación funcionarán como deberían. Parece que entonces el retraso de la animación es lo que está causando el problema. Quizás en lugar de confiar en css para manejar el retraso, controle mediante programación el retraso de la animación con javascript.

Vea abajo pausando y ejecutando la animación.

function test() {
  var timeout = 1000;
  setTimeout(function() {
    document.getElementById(''animation'').style.animationPlayState =''paused'';
    document.getElementById(''animation'').style.webkitAnimationPlayState =''paused'';
  }, timeout);
  setTimeout(function() {
    document.getElementById(''animation'').style.animationPlayState=''running'';
    document.getElementById(''animation'').style.webkitAnimationPlayState =''running'';
  }, timeout * 2);
}

document.addEventListener("DOMContentLoaded", test);

#animation {
    -webkit-animation: test 2s linear;
        animation: test 2s linear;
}

@-webkit-keyframes test {
  to {
    -webkit-transform: translateY(100px);
        transform: translateY(100px);
  }
}

@keyframes test {
  to {
    -webkit-transform: translateY(100px);
        transform: translateY(100px);
  }
}

<div id="animation">
  Hello (this text should not move)
</div>