Jak zachować style po animacji?

Question

Pracuję nad portfolio, aby pokazać, kiedy ubiegam się o moje następne badanie. Odkąd mieszkamy w 2012 roku, ma mnóstwo fantazyjnych animacji i śmieci CSS3, aby dać im poczucie "Potrzebujemy tego faceta". W tej chwili mam mały problem.

Jest to niewielka część określonego elementu:

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

Należy pamiętać, że wyszedłem na zewnątrz klatki kluczowe Firefox, ponieważ są one zupełnie takie same. Prawy, brzydki format CSS, który sprawia, że ​​elementy z id "fadein" ... znikają.

Problem polega na tym, że elementy znikają ponownie po zakończeniu animacji. To zmienia źle sformatowane Css w niezdatne do użycia Css.

Czy ktoś ma pojęcie, jak zachować zmieniony styl po animacji?

Sądzę, że to pytanie zostało zadane wcześniej i jest mi bardzo przykro z tego powodu.

Answer 1

spróbuj:

#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 odpowiedź jest właściwa droga, ale nie całkowicie cross-browser, jednak ten plugin jquery umożliwia callbacków animacji i można projektować elementy jak chcesz w funkcji wywołania zwrotnego: https://github.com/krazyjakee/jQuery-Keyframes