Как начать анимацию CSS3 в определенном месте?

Question

Я использую анимацию CSS3, и я хочу, чтобы я мог перейти к определенному месту в анимации. Например, если CSS выглядит следующим образом (и делать вид, что я использовал все соответствующие префиксы):

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

, то я хотел бы быть в состоянии остановить анимацию, и перенести его на 50% отметки. Я думаю, что идеальный JavaScript будет выглядеть примерно так:

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

Кто-нибудь знает способ, чтобы это произошло (надеюсь, в Webkit)?

Answer 1

Мы можем использовать имущество animation-delay. Обычно это задерживает анимацию в течение некоторого времени, и, если вы установите animation-delay: 2s;, анимация начнется через две секунды после того, как вы применили анимацию к элементу. Но, вы также можете использовать его, чтобы заставить его начать играть анимацию с определенным временным сдвигом, используя отрицательное значение:

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

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