Jak mogę uruchomić animacje CSS3 w określonym miejscu?

Używam animacji CSS3 i chcę mieć możliwość przejścia do określonego miejsca w animacji. Na przykład, jeśli CSS wygląda tak (i ​​udawać, że użyłem wszystkich poprawnych prefiksów):

<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>

wtedy chciałbym móc zatrzymać animację i przenieść ją do znaku 50%. Myślę, że idealny JavaScript wyglądałby mniej więcej tak:

<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>

Czy ktoś wie, jak to się stało (miejmy nadzieję w Webkit)?

questionAnswers(1)

yourAnswerToTheQuestion