Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

How to keep styles after animation?

How to keep styles after animation?

Problem

I'm working at a portfolio to show when I apply for my next study. Since we're living in 2012, it has tons of fancy animations and CSS3 junk, just to give them the 'We need this guy' feeling. I'm having a little problem at the moment.

This is a small part of a specific element:

/* This is the CSS of the elements with the id called 'fadein' */
#fadein {
    -moz-animation-duration: 2s;
    -moz-animation-name: item;
    -moz-animation-delay: 4.5s;
    -webkit-animation-duration: 5s;
    -webkit-animation-name: item;
-webkit-animation-delay: 4.5s;
opacity:0;
-webkit-opacity:0;
}

@-webkit-keyframes item {
from {
-webkit-opacity: 0;
     }
to { 
-webkit-opacity: 1;
 }
}

Please note that I left out the Firefox keyframes, since they are quite the same. Right, ugly-formatted CSS that makes elements with the id 'fadein'... fade in.

The problem is, the elements disappear again after the animation is finished. This turns ugly-formatted Css into unusable Css.

Does anybody have any idea how to keep the changed style after the animation?

I guess this question has been asked before and I'm pretty sorry for that if so.

Problem courtesy of: amees_me

Solution

Try with:

#fadein {
   -webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/
   -moz-animation-fill-mode:forwards; /*FF 5+*/
   -o-animation-fill-mode:forwards; /*Not implemented yet*/
   -ms-animation-fill-mode:forwards; /*IE 10+*/
   animation-fill-mode:forwards; /*when the spec is finished*/
}
Solution courtesy of: Duopixel

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

How to keep styles after animation?

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×