Jquery CSS3动画填充模式多边形填充 前言

让我们假设一个

div

是从

opacity:0设置的动画至<代码>不透明度：1我想保持
不透明度：1动画结束后

这就是
动画填充模式：向前可以

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

现在我有了一个
。没有用于CSS的动画填充模式
类和用于JavaScript的
Modernizer.animationFillMode

我还从中读到：

文档样式表中指定的动画将从
文件加载


最后，问题
在动画结束的精确秒数上运行一个简单的jQuery函数可以吗

$(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 */

或者是否有任何已知的多边形填充特定于
动画填充模式


另外，如果我使用速记语法会发生什么

animation:myAnimation 2s 1s forwards;

在支持
动画
但不支持
动画填充模式
的浏览器上

非常感谢
 我不知道有任何polyfill。。。
但我想说的是，您确实应该使用自己的自定义Modernizer测试，对于不支持动画填充模式的浏览器，您应该使用
animationEnd
事件触发回调并将不透明度设置为1（或删除一个类）

见：

至于速记法，如果是我，我会尽可能选择更简单的方法。我会降低我的实现级别，这样我只使用普遍接受的东西。稍后，当这个特性得到更广泛的支持时，我会考虑实现它。我很少考虑使用一个具有<代码>的特性。这是一个实验技术在文档页面上广播-但是也许我应该被归类为无聊：< /P>
在您的示例中，您可以通过最初定义元素的结束状态并使用链接动画（如果需要动作之前的延迟）来实现与“动画填充模式：向前”相同的结果：

@关键帧等待和隐藏{
从{opacity:0；}
到{不透明度：0；}
}
@关键帧显示{
从{opacity:0；}
到{opacity:1；}
}
div{
不透明度：1；
动画：等待并隐藏2s 0s，显示2s 2s；
}
只是个测试​


现在，速度较慢的浏览器可能会在再次隐藏元素状态之前刷新它们。但在我的经验中，我只在非常旧的机器上看到过这种情况，也只在需要呈现大量css的页面上看到过这种情况

显然，上面的内容会使css膨胀一点（因为您必须复制样式），并且在处理复杂的动画时会更加复杂。然而：

它应该适用于几乎任何动画情况
这将避免对JavaScript的需要（除了$（）.fadeIn回退）
它将在所有支持css动画的浏览器上运行
您不会有JS和CSS不同步的风险
关于使用短表单，如果您希望尽可能实现广泛的浏览器兼容性，最好不要这样做。然而，正如我上面的例子所示，我选择使用简短的形式，因为它们更清晰，我可以理解不想一直写（或读）冗长的版本。出于这个原因，我建议使用较少的代码生成css：


仅供参考，以下是我现在如何实施pebbl的答案（这是一个非常聪明的答案）。我只需要的css动画检测

让我们假设我想滑动并淡出此div：

<div class="target">Some stuff</div>

然后是一个新的班级

.target-animation {
    height:0; opacity:0; // same as "100%" state
    animation:byebye 750ms 1;
}

移动到javascript：

// $('.whatever').on('click',function(){ ...

if(Modernizr.cssanimations)
    // css animations are supported!
    $('.target').addClass('target-animation');
else
    // i hate you IE
    $('.target').animate({height:0,opacity:0},750);

如果需要多次触发动画，只需使用javascript删除该类，如下所述：

似乎…好吃：-）有关于速记语法的事吗？不要用它，我会说。。。需要进一步测试；-）嗯，我需要确定，因为它在处理多个动画时非常有用，其中一个必须保持最终状态，另一个不能。无论如何，非常感谢，你的答案非常有用！但我会再等几天，然后再分配赏金。感谢lotUse-webkit背面可见性：隐藏；防止浏览器闪烁conent
@keyframes byebye {
    0% { height:100px; opacity:1; }
    100% { opacity:0; height:0; }
}

.target-animation {
    height:0; opacity:0; // same as "100%" state
    animation:byebye 750ms 1;
}

// $('.whatever').on('click',function(){ ...

if(Modernizr.cssanimations)
    // css animations are supported!
    $('.target').addClass('target-animation');
else
    // i hate you IE
    $('.target').animate({height:0,opacity:0},750);

// if(Modernizr.cssanimations) ...

$('target').addClass('target-animation').on('webkitAnimationEnd oAnimationEnd oanimationend animationend msAnimationEnd',function(){
    $(this).removeClass('target-animation')
    // don't forget to  .hide()  if needed
});

// ... else