Preface

Давайте притворимся, чтоdiv анимирован изopacity:0; вopacity:1; и я хочу сохранитьopacity:1; после окончания анимации.

Вот чтоanimation-fill-mode:forwards; делает.

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

Запустите его на jsFiddle

Note 1: i didn't include the vendor prefixes here to simplify Note 2: that's just an example, please don't reply with "just use jQuery fadeIn function" etc. Some things to know

Вэтот ответ я читал этоanimation-fill-mode поддерживается Chrome 16+, Safari 4+, Firefox 5+.

Ноanimation в одиночествеподдерживается Chrome 1+ и Opera тоже. Итак, общий тест сModernizr может вернуть положительный, даже еслиfill-mode не поддерживается.

К целиanimation-fill-mode я добавил новый тест на Modernizr:

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

Теперь я.no-animation-fill-mode класс для CSS иModernizr.animationFillMode для JavaScript.

Я также читал изCSS3 анимации спецификации тот:

an animation specified in the document style sheet will begin at the document load

Finally, the question(s)

Можно ли запускать простую функцию jQuery наexact number of seconds анимация заканчивается

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

И в CSS:

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

Или есть какой-нибудь известный полифиллspecific заanimation-fill-mode ?

Кроме того, что произойдет, если я использую сокращенный синтаксис

animation:myAnimation 2s 1s forwards;

на браузерах, поддерживающихanimation но нетanimation-fill-mode ?

Большое спасибо!