¿Cómo mantener los estilos después de la animación?

Question

Estoy trabajando en una cartera para mostrar cuando solicite mi próximo estudio. Como vivimos en 2012, tiene toneladas de animaciones sofisticadas y basura CSS3, solo para darles la sensación de "Necesitamos a este tipo". Tengo un pequeño problema en este momento.

Ésta es una pequeña parte de un elemento específico:

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

Tenga en cuenta que me he dejado los fotogramas clave de Firefox, ya que son exactamente lo mismo. derecho, CSS-fea formato que hace que los elementos con el id 'fadein' ... fundido de entrada.

El problema es que los elementos de desaparecer de nuevo después de la animación está terminado. Esto convierte Css con formato feo en Css inutilizable.

¿Alguien tiene alguna idea de cómo mantener el estilo cambió después de la animación?

supongo que esta pregunta se ha hecho antes y estoy bastante mal por que ser así.

Answer 1

intento con:

#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 respuesta es la manera correcta, pero no totalmente a través del navegador, sin embargo, este plugin jQuery permite devoluciones de llamada de animación y puede estilo de los elementos de la forma que desee en la función de devolución de llamada: https://github.com/krazyjakee/jQuery-Keyframes