I read this article about animating with CSS @keyframes : https://robots.thoughtbot.com/css-animation-for-beginners
There are many fancy css animations out there.
Animation for background-clip: text - Codrops Playground
I want to adopt them into my project.
However I don't need The CSS animation to loop.
I think I need to explain about my project first.
in my project, users are able to scrub with a slider back and forth just like the playhead of video
This is done outside Edge file by using the main timeline api - sym.stop(TIME)
So I need to hook up everything with the main timeline.
Back to the CSS @keyframes animation, the duration is set to 2seconds
div{ animation-duration:2s; animation-name: bounceIn; }
Let's assume my project is 10sec length in total, and if i put the start of the animation at 7 seconds of my Edge project.
With stop(8000) function, the bounceIn animation should stop at 1 seconds -- that is in the middle of the duration of 2s.
so my questions are
How can I put it in the middle of my Edge project?
How can I control the time wiht main timeline api of EA?