Question

我有一些jQuery成功地为下面的动画添加了所需的类。

1）首先，下面的动画仅在Chrome中播放。我的IE（版本11.0）和Firefox（32.0.3）根本没有播放动画。

2）其次，如果我没有'不透明度：1;'在我的动画类中，元素将淡出为不透明度0（其原始值）。有没有更好的方法让它保持动画的最终值而不必在动画中设置它？看起来有点非直观地设置动画类中元素的属性，因为它不明确何时生效（在关键帧之前，之后）。

HTML：

<!-- Appear after 1 second -->
<h1 data-appear='1'>1</h1>

CSS：

h1 {
    opacity: 0;
}

@-webkit-keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@-moz-keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@-o-keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes appear {
  0%   { opacity: 0; }
  50%   { opacity: 0; }
  100% { opacity: 1; }
}

.appear.delay1 {
    animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;

    animation: appear;
    -o-animation-name: appear;
    -moz-animation-name: appear;
    -webkit-animation-name: appear;

    opacity: 1;
}

Answer 1

1。）秘密在于CSS规则的顺序。定义持续时间时尚未定义动画。如果我在最新的firefox中切换顺序它适用于我：

.appear.delay1{

    animation: appear;
    -o-animation: appear;
    -moz-animation: appear;
    -webkit-animation: appear;

    animation-duration: 1s;
    -o-animation-duration: 1s;
    -moz-animation-duration: 1s;
    -webkit-animation-duration: 1s;
}

2。）如果定义填充模式，则无需定义不透明度。使用填充模式，您可以指定动画完成时动画的状态。在这种情况下，您希望100％坚持，因此您应该将填充模式设置为向前。

-o-animation-fill-mode: forwards; 
-moz-animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;

我在下面的小提琴中将它拼凑在一起：

http://jsfiddle.net/mxa377m4/

非Chrome浏览器中的动画问题

1 个答案: