Pergunta sobre javascript, css-animations, css3, webkit – Como posso iniciar animações CSS3 em um ponto específico?

6

Estou usando animações CSS3 e quero ser capaz de mudar para um ponto específico na animação. Por exemplo, se o CSS se parece com isso (e fingir que usei todos os prefixos apropriados):

<code>@keyframes fade_in_out_anim {
  0% { opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { opacity: 0; }
}
#fade_in_out {
  animation: fade_in_out_anim 5s;
}
</code>

então eu gostaria de poder parar a animação e movê-la para a marca de 50%. Eu acho que o JavaScript ideal seria algo como isto:

<code>var style = document.getElementById('fade_in_out').style;
style.animationPlayState = 'paused';

// Here comes the made up part...
style.animation.moveTo('50%'); // Or alternately...
style.animationPlayPosition = '50%';
</code>

Alguém sabe de uma maneira de fazer isso acontecer (espero que no Webkit)?

Você pode fornecer mais informações sobre o seu objetivo? Porque se você quiser apenas iniciar uma animação no meio do caminho, eu recomendaria duas animações, uma começando com 50% e outra com o efeito completo, e depois escolhendo entre elas usando classes. OverZealous
Eu quero ser capaz de criar uma interação deslizante ou toque que permitirá que o usuário esfregue ao longo de uma animação. Eu decidi dividir a animação em estágios até descobrir como fazer o que preciso. Joel A. Shinness

Sua resposta

1   a resposta
20

Nós podemos usar oanimation-delay propriedade. Geralmente atrasa a animação por algum tempo e, se você definiranimation-delay: 2s;, a animação começará dois segundos depois que você aplicou a animação ao elemento. Mas você também pode usá-lo para forçar a reprodução de animação com um deslocamento de tempo específico usando um valor negativo:

<code>.element-animation{
animation: animationFrames ease 4s;
animation-delay: -2s;
}
</code>

http://default-value.com/blog/2012/10/start-css3-animation-from-specified-time-frame/

Esta deve ser a resposta selecionada. É fácil de implementar e é claro. Adam

Perguntas relacionadas