Grow your CSS skills. Land your dream job.

Prevent css3 animation from returning to original state?

  • # April 4, 2013 at 4:04 pm

    Hi,

    I’m using css3 to animate the position of an element. It functions correctly…but after the animation is complete, the element returns to it’s original state. I’ve managed to find a partial fix by adding **-webkit-animation-fill-mode: forwards**; to the element. I’m thinking there must be a better method though.

    Does anyone have a better solution? Your help is appreciated.

    **Example:** http://jsfiddle.net/6bzTY/1/embedded/result/

    **Example** (with animation-fill-mode): http://jsfiddle.net/6bzTY/embedded/result/

    # April 4, 2013 at 4:28 pm

    You got the solution already:

    animation-fill-mode: forwards;

    # April 4, 2013 at 4:44 pm

    Yep…guess that might be the only method for now. Here is further reading on the subject for anyone interested…

    http://css-infos.net/property/-webkit-animation-fill-mode

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

You must be logged in to reply to this topic.

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