0 Replies Latest reply on Nov 29, 2015 6:26 AM by Kyle_KIM

    CSS @keyframes ainmation into my Edge Animate project

    Kyle_KIM Level 1

      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?