Come mantenere gli stili dopo l'animazione?

Question

Sto lavorando a un portfolio da mostrare quando faccio domanda per il mio prossimo studio. Dal momento che viviamo nel 2012, ha tonnellate di fantasiose animazioni e ciarpame CSS3, solo per dare loro la sensazione di 'Abbiamo bisogno di questo ragazzo'. Sto avendo un piccolo problema al momento.

Questa è una piccola parte di un elemento specifico:

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

Si prega di notare che ho lasciato fuori i fotogrammi chiave di Firefox, dal momento che sono proprio la stessa cosa. CSS con formattazione corretta, che rende sfumati gli elementi con l'id 'fadein'. Fade in.

Il problema è che gli elementi scompaiono di nuovo dopo che l'animazione è terminata. Questo trasforma Css in un Css inutilizzabile.

Qualcuno ha idea di come mantenere lo stile modificato dopo l'animazione?

Immagino che questa domanda sia già stata fatta prima e sono davvero dispiaciuto per questo se è così.

Answer 1

Prova 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 risposta è la strada giusta, ma non totalmente cross-browser, tuttavia, questo plugin jQuery permette di callback di animazione ed è possibile lo stile degli elementi come ti piace nella funzione di callback: https://github.com/krazyjakee/jQuery-Keyframes