Grow your CSS skills. Land your dream job.

Start CSS Animation from second animated position

  • # March 31, 2013 at 12:21 pm

    How can i have my second CSS animation applied to an image move on from the first CSS animation position? The image goes back to its default position and moves to the second animation position from there. I want it to remain in the new CSS animation position, and move on to the second position without it going back to its default position. Here’s a pen.
    [PEN](http://codepen.io/Jarolin/pen/ozpJk “”)

    PS. For some reason the second animation only happens if you resize the pen window. I dont know why but it does that on codepen only

    # April 3, 2013 at 5:17 pm

    Really nice Job

    # April 3, 2013 at 6:53 pm

    @Hectorsito20 Thanks. But still no solution to my problem.

    # April 3, 2013 at 8:31 pm

    add a 0% state to the fade out animation:

    Pen

    I believe that, if no 0% or from is in place it will look for the default display settings in the css as opposed to the animation.

    ***Edit: changed code block to link to forked codepen. Sorry, I was being lazy***

    # April 3, 2013 at 9:07 pm

    @will_wallace85 Just what i was looking for. Thanks bro i really appreciate it.

    Now there’s another problem. I have no idea why this happens but the second animation does not happen unless you resize the browser window.

    # April 4, 2013 at 2:47 am

    Was just coming back to look at this and it seems you got this sorted. Would you mind posting what, if anything you changed to get it working?

    # April 4, 2013 at 3:26 pm

    @will_wallace85 NVM I got it working, but here you go[PEN](http://codepen.io/Jarolin/pen/ozpJk “”) either way.

    But there is another thing. I’m looking towards making this whole thing repeatable starting from the first image and continuing the entire process over and over again.

    # April 4, 2013 at 4:40 pm

    @Jarolin, you’d probably look into animation iteration count to make it loop.

    https://developer.mozilla.org/en-US/docs/CSS/animation-iteration-count

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".