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

6

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

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

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

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

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

Можете ли вы предоставить больше информации о том, какова ваша цель? Поскольку, если вы просто хотите запустить анимацию в середине пути, я бы порекомендовал две анимации, одна из которых начинается с 50%, а другая - с полным эффектом, а затем выберите между ними классы. OverZealous
Я хочу иметь возможность создавать слайдер или сенсорное взаимодействие, которое позволит пользователю перемещаться по анимации. Я решил разбить анимацию на этапы, пока не выясню, как делать то, что мне нужно. Joel A. Shinness

Ваш Ответ

1   ответ
20

Мы можем использовать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/

Error: User Rate Limit Exceeded

Похожие вопросы