html - keyframes - css efectos texto movimiento

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

Question

Estoy trabajando en una cartera para mostrar cuando solicito mi próximo estudio. Ya que estamos viviendo en 2012, tiene un montón de animaciones de fantasía y basura CSS3, solo para darles el sentimiento ''Necesitamos a este tipo''. Estoy teniendo un pequeño problema en este momento.

Esta 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 omití los fotogramas clave de Firefox, ya que son bastante iguales. Correcto, CSS con formato feo que hace que los elementos con el id ''fadein'' ... se desvanezcan.

El problema es que los elementos vuelven a desaparecer una vez finalizada la animación. Esto convierte a Css con formato feo en Css inutilizable.

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

Supongo que esta pregunta se ha hecho antes y lo siento mucho si es así.

Answer 1

Intenta 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

La respuesta de Duopixels es la forma correcta, pero no totalmente de navegador cruzado, sin embargo, este complemento jquery habilita las devoluciones de llamada de animación y puede diseñar los elementos como desee en la función de devolución de llamada: https://github.com/krazyjakee/jQuery-Keyframes