How to keep styles after animation?

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;

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


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

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:

Need Your Help

Trying to remove nan from csv file in python pandas

python csv pandas nan phone-number

I am trying to remove nan values from a final csv file, which will source data for digital signage.

Develop Graph on J2ME

graph canvas java-me

I going to develop Graph on my j2me application. I have taken Canvas & I wann to draw graph on particular data then how i can draw graph ?