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

Я использую анимацию 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)?