Przedmowa

Udawajmy, że adiv jest animowany zopacity:0; doopacity:1; i chcę zostaćopacity:1; po zakończeniu animacji.

To coanimation-fill-mode:forwards; robi.

@keyframes myAnimation {
    from { opacity:0; }
    to { opacity:1; }
}
div {
    opacity:0;
    animation-name:myAnimation;
    animation-delay:1s;
    animation-duration:2s;
    animation-fill-mode:forwards;
}​
<div>just a test</div>​

Uruchom go na jsFiddle

Uwaga 1: Nie dodałem tutaj prefiksów dostawcy, aby uprościćUwaga 2: to tylko przykład, nie odpowiadaj „po prostu użyj funkcji jQuery fadeIn” itd.Kilka rzeczy do poznania

Wta odpowiedź Przeczytałem toanimation-fill-mode jest obsługiwany przez Chrome 16+, Safari 4+, Firefox 5+.

Aleanimation samjest obsługiwany przez Chrome 1+ i Opera też. Więc ogólny test zModernizr może powrócić pozytywnie, nawet jeślifill-mode nie jest wspierany.

Do celuanimation-fill-mode dodałem nowy test na Modernizr:

Modernizr.addTest('animation-fill-mode',function(){
    return Modernizr.testAllProps('animationFillMode');
});

Teraz mam.no-animation-fill-mode klasa dla CSS iModernizr.animationFillMode dla JavaScript.

Czytałem też zSpecyfikacje animacji CSS3 że:

animacja określona w arkuszu stylów dokumentu rozpocznie się od obciążenia dokumentu

Wreszcie pytanie (-a)

Czy można uruchomić prostą funkcję jQuery na stroniedokładna liczba sekund animacja się kończy

$(document).ready(function(){
    if(!Modernizr.animation){
        $('div').delay(1000).fadeIn(2000);
    }else if(!Modernizr.animationFillMode){
        $('div').delay(3000).show();
    }
});

W CSS:

.no-animation-fill-mode div {
    animation-iteration-count:1;
}
/* or just animation:myAnimation 2s 1s 1; for everyone */

Czy jest jakiś znany wypełniaczkonkretny dlaanimation-fill-mode ?

Co się stanie, jeśli użyję skróconej składni

animation:myAnimation 2s 1s forwards;

na obsługiwanych przeglądarkachanimation ale nieanimation-fill-mode ?

Wielkie dzięki!