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

Question

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 następująco (i udawać, że kiedyś wszystkie odpowiednie prefiksy):

@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; 
} 

wtedy chciałbym być w stanie zatrzymać animację, i przenieść go do znaku 50%. Myślę, że idealnym JavaScript będzie wyglądać mniej więcej tak:

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%'; 

Czy ktoś zna sposób, aby tak się stało (mam nadzieję, że w Webkit)?

Answer 1

Możemy użyć właściwości animation-delay. Zwykle opóźnia animację przez pewien czas, a jeśli ustawisz animation-delay: 2s;, animacja rozpocznie się dwie sekundy po zastosowaniu animacji do elementu. Ale można również używać go zmusić go, aby rozpocząć odtwarzanie animacji z określonym przesunięciem czasowym używając wartość ujemną:

.element-animation{ 
animation: animationFrames ease 4s; 
animation-delay: -2s; 
} 

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