14

前言

让我们假设 adiv是动画 from opacity:0;toopacity: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 上运行它

  • 注意 1：我没有在此处包含供应商前缀以简化
  • 注意2：这只是一个例子，请不要回复“只使用jQuery的fadeIn函数”等。

有些事情要知道

在这个答案中，我读到animation-fill-modeChrome 16+、Safari 4+、Firefox 5+ 支持。

但Chrome 1+ 和 Opera 也animation单独支持。因此，即使不支持Modernizr的一般测试也可能返回正面。fill-mode

为了达到目标animation-fill-mode，我在 Modernizr 上添加了一个新测试：

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

现在我有一个.no-animation-fill-mode针对 CSS 和Modernizr.animationFillModeJavaScript 的课程。

我还从CSS3 动画规范中读到：

文档样式表中指定的动画将在文档加载时开始

最后，问题

可以在动画结束的确切秒数处运行一个简单的 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 */

或者是否有任何已知的 polyfill特定于animation-fill-mode？

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

animation:myAnimation 2s 1s forwards;

animation在支持但不支持的浏览器上animation-fill-mode？

非常感谢！

4

3 回答 3

6

如果是我，我会尝试选择更简单的选择 - 如果可能的话。我会降级我的实现，以便我只使用普遍接受的东西。后来，当该功能得到更广泛的支持时，我会考虑实现它。我很少考虑使用This is an experimental technology在文档页面上广播的功能 - 但也许我应该被归类为无聊:)

animation-fill-mode:forwards在您的示例中，您可以通过最初定义元素的结束状态并使用链接动画（如果需要在操作之前延迟）来获得相同的结果：

@keyframes waitandhide {
  from { opacity:0; }
  to { opacity:0; }
}
@keyframes show {
  from { opacity:0; }
  to { opacity:1; }
}
div {
  opacity:1;
  animation: waitandhide 2s 0s, show 2s 2s;
}
<div>just a test</div>​

http://jsfiddle.net/RMJ8s/1/

现在，较慢的浏览器可能会在再次隐藏它们之前闪现您的初始元素状态。但根据我的经验，我只在非常旧的机器和需要渲染大量 css 的页面上看到过这种情况。

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

  1. 它应该适用于几乎任何动画情况。
  2. 它将避免对 JavaScript 的需要（除了 $().fadeIn 后备）。
  3. 它适用于所有支持 css 动画的浏览器。
  4. 您不会冒 JS 和 CSS 不同步的风险。

关于使用短格式，如果您想尽可能广泛地兼容浏览器，最好不要这样做。然而，如我上面的例子所示，我选择使用短格式，因为它们更清晰，我可以理解不想一直写（或读）冗长的版本。出于这个原因，我建议使用 less 来生成你的 CSS：

http://lesscss.org/

http://radiatingstar.com/css-keyframes-animations-with-less

于 2012-09-25T23:21:16.260 回答
2

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

请参阅：CSS3 过渡事件

至于速记符号，IE <10 不支持 animation-fill-mode 属性，我很确定它会破坏整个声明。

于 2012-09-23T16:30:16.767 回答
0

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

假设我想滑动和淡化这个 div：

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

首先，我写下动画带有供应商前缀

@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;
}

转移到 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 删除类，如下所述：

// 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
于 2013-04-26T21:59:55.923 回答