Start CSS Animation from second animated position

[Anonymous]

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

[Hectorsito20]

Really nice Job

[Anonymous]

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

[will_wallace85]

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

[Anonymous]

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

[will_wallace85]

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?

[Anonymous]

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

[Author]

Posts