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

[Anonymous]

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

@keyframes Fade_in_out_anim { 0% { непрозрачность: 0; } 25% { непрозрачность: 1; } 75% { непрозрачность: 1; } 100% { непрозрачность: 0; } } #fade_in_out { анимация: Fade_in_out_anim 5 с; } Тогда я хотел бы иметь возможность остановить анимацию и переместить ее на отметку 50%. Я предполагаю, что идеальный JavaScript выглядел бы примерно так:

var style = document.getElementById('fade_in_out').style; style.animationPlayState = 'приостановлено'; // Вот и готовая часть... style.animation.moveTo('50%'); // Или альтернативно... style.animationPlayPosition = '50%'; Кто-нибудь знает, как это сделать (надеюсь, с помощью Webkit)?