Animasyondan sonra stiller nasıl saklanır?

Question

Bir sonraki çalışmam için başvurduğumda göstermek için bir portföy üzerinde çalışıyorum. 2012'de yaşadığımız için, onlara 'Bu adama ihtiyacımız var' hissi vermek için çok sayıda fantezi animasyonu ve CSS3 çöplüğü var. Şu an küçük bir sorun yaşıyorum.

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

onlar oldukça aynı olduğundan ben Firefox kareleri dışında kalan unutmayınız:

Bu belirli elemanın küçük bir parçasıdır. Sağ, çirkin biçimlendirilmiş CSS 'fadein' kimliğine sahip öğeler yapar ... kaybolur.

Sorun, animasyon bittikten sonra öğelerin yeniden kaybolduğudur. Bu, çirkin biçimlendirilmiş CSS'yi kullanılamaz CSS'ye dönüştürür.

Animasyondan sonra değiştirilen stili nasıl tutacağımız hakkında bir fikri olan var mı?

Bu sorunun daha önce sorulmuş olduğunu düşünüyorum ve eğer öyleyse oldukça üzgünüm.

Answer 1

deneyin ile:

#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 cevap doğru yoldur, ama değil tamamen çapraz tarayıcı, ancak bu jquery eklentisi animasyon geri aramalar sağlayan ve size geri arama işlevi gibi nasıl elemanları stil özelliklerini ayarlayabilirsiniz: https://github.com/krazyjakee/jQuery-Keyframes