0

Let's say I have a simple and linear CSS animation like this

@keyframes move {
    0% {top: 0;}
    100% {top: -10000px;} 
}

Which loops infinitly, and uses 10 steps:

.move {
    animation: move 1s steps(10, end) infinite;
    animation-play-state: running;
}

And it has a second animation which makes it go for 60 seconds

.sixty_seconds {animation-duration: 60s;}

How can I use javascript to start the animation halfway through its iteration? Is there a way to start a specific animation at a specific percent through its iteration? I need this starting point to be programmable, as it could start at 30% one time, or 77.32% the next.

I'm sure the answer is right under my nose, but I can't seem to find anything that gets it to use these existing animations starting at a specific point.

Thank you very much.

Wolf Merrik
  • 28
  • 1
  • 7
  • 2
    [`animation-delay`](https://developer.mozilla.org/en-US/docs/Web/CSS/animation-delay). – Patrick Roberts Feb 19 '18 at 18:30
  • Possible duplicate of [CSS animation delay in repeating](https://stackoverflow.com/questions/13887889/css-animation-delay-in-repeating) – Patrick Roberts Feb 19 '18 at 18:31
  • That seems to work fairly well when using something like item.style.animationDelay = "-"+seconds+"s"; – Wolf Merrik Feb 19 '18 at 19:03
  • I did not know animation-delay did anything except for wait for an animation to begin. – Wolf Merrik Feb 19 '18 at 19:04
  • Although this does not allow for a certain position easily does it, if I call the same function at -500s do I have to account for time elapsed in the previous animations? – Wolf Merrik Feb 19 '18 at 19:17
  • It does help me get a certain starting position, however. But how could I use this to change to a specific position of the animation on the fly. – Wolf Merrik Feb 19 '18 at 19:18

0 Answers0