Vorwort

Lassen Sie uns so tun, als ob adiv ist animiert vonopacity:0; zuopacity:1; und ich will behaltenopacity:1; Nach dem Ende der Animation.

Das ist, wasanimation-fill-mode:forwards; tut.

@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>​

Führen Sie es auf jsFiddle aus

Anmerkung 1: Ich habe die Herstellerpräfixe hier nicht angegeben, um dies zu vereinfachenHinweis 2: Dies ist nur ein Beispiel. Bitte antworten Sie nicht mit "Verwenden Sie einfach die jQuery-FadeIn-Funktion" usw.Einige Dinge zu wissen

Imdiese Antwort Ich lese dasanimation-fill-mode wird von Chrome 16+, Safari 4+, Firefox 5+ unterstützt.

Aberanimation alleinwird unterstützt von Chrome 1+ und Opera auch. Also ein allgemeiner Test mitModernizr kann auch dann positiv sein, wennfill-mode wird nicht unterstützt.

Zum zielenanimation-fill-mode Ich habe einen neuen Test für Modernizr hinzugefügt:

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

Jetzt habe ich eine.no-animation-fill-mode Klasse für CSS undModernizr.animationFillMode für JavaScript.

Ich lese auch ausCSS3-Animationsspezifikationen Das:

Eine im Dokument-Stylesheet angegebene Animation beginnt beim Laden des Dokuments

Schließlich die Frage (n)

Ist es in Ordnung, eine einfache jQuery-Funktion auf der auszuführen?genaue Anzahl von Sekunden Die Animation endet

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

Und in CSS:

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

Oder ist eine Polyfüllung bekannt?Spezifisch zumanimation-fill-mode ?

Und was passiert, wenn ich die Kurzschrift-Syntax verwende?

animation:myAnimation 2s 1s forwards;

auf unterstützenden Browsernanimation aber nichtanimation-fill-mode ?

Danke vielmals!