How to keep styles after animation?

Question

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.

Answer 1

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

Answer 2

Duopixels answer is the right way, but not totally cross-browser, however, this jquery plugin enables animation callbacks and you can style the elements how you like in the callback function: https://github.com/krazyjakee/jQuery-Keyframes