Html/css关键帧转换在IE和Firefox中不能正常工作

Question

我想创建一个6帧的横幅，没有css样式表，在html中只使用样式标签。

我贴了第三张和第四张，因为它们是不同的，可以看到。

我的问题是，在firefox中，它在第4帧(1-2-3-4-4-4)停止，而不会继续到第5和第6帧，在IE中，我只能看到第1、2帧，它跳到第5帧。

第三帧

<div style="width:1000px; height:120px;top:0px; left:0px;  position:absolute; animation: frame3-animation 30s infinite ease-in;">
<img src="img/background2.jpg" style="position: absolute;   top:0px;    left:0px;    " alt="">
<img src="img/white_background.png" style="position: absolute;  top:10px;   left:36px;   " alt="">
<img src="img/logo2.png" style="top:7px;    left:18px;  position: absolute;   background-position: center;  background-repeat: no-repeat;" alt="">
<img src="img/frame3_cat_traiesti.png" style="position: absolute; top:20px; left:355px; " alt="">
    <style>@-webkit-keyframes frame3-animation {
0%   { opacity:1;}
48%  { opacity:1;}
49%  {opacity:0;}
99%  {opacity:0;}
99.99999%  {opacity:0;}
    }</style>
    <style>@-moz-keyframes frame3-animation {
0%   { opacity:1;}
48%  { opacity:1;}
49%  {opacity:0;}
99%  {opacity:0;}
99.99999%  {opacity:0;}
    }</style>
    <style>@-oz-keyframes frame3-animation {
0%   { opacity:1;}
48%  { opacity:1;}
49%  {opacity:0;}
99%  {opacity:0;}
99.99999%  {opacity:0;}
    }</style>
    <style>@-ms-keyframes frame3-animation {
0%   { opacity:1;}
48%  { opacity:1;}
49%  {opacity:0;}
99%  {opacity:0;}
99.99999%  {opacity:0;}
    }</style>

这是第四帧。我在动画中使用了z-index因为它有可点击按钮如果没有z-index它就无法点击

<div style="width:1000px; height:120px; top:0px; left:0px; position:absolute; animation: frame4-animation 30s infinite ease-in;">
<img src="img/background2.jpg" style="position: absolute;   top:0px;    left:0px;   overflow: visible;" alt="">
<img src="img/white_background2.png" style="position: absolute; top:8px;    left:35px;  overflow: visible;" alt="">
<img src="img/frame4_cat_traiesti.png" style="position: absolute;   top:30px;   left:140px; overflow: visible;" alt="">
<img src="img/frame4_circle.png" style="position: absolute; top:11px;   left:470px; overflow: visible;" alt="">
<img src="img/frame4_1x.png" style="position: absolute; top:17px;   left:596px; overflow: visible;" alt="">
<img src="img/logo2.png" style="position: absolute; top:7px;    left:18px;  overflow: visible; background-position: center; background-repeat: no-repeat;" alt="">
<a href="INSERT LINK" target="_blank" style="position: absolute;    top:44px;   left:768px; "><img src="img/promotie.png" style="overflow: visible;" alt=""></a><!-- Insert Link-->
    <style>@-webkit-keyframes frame4-animation {
0%   {opacity:1;}
65%  {opacity:1;}
66%  {z-index:2;}
99%  {z-index:2;}
99.99999%  {z-index:2;}
    }</style>
    <style>@-moz-keyframes frame4-animation {
0%   {opacity:1;}
65%  {opacity:1;}
66%  {z-index:2;}
99%  {z-index:2;}
99.99999%  {z-index:2;}
    }</style>
    <style>@-oz-keyframes frame4-animation {
0%   {opacity:1;}
65%  {opacity:1;}
66%  {z-index:2;}
99%  {z-index:2;}
99.99999%  {z-index:2;}
    }</style>
    <style>@-ms-keyframes frame4-animation {
0%   {opacity:1;}
65%  {opacity:1;}
66%  {z-index:2;}
99%  {z-index:2;}
99.99999%  {z-index:2;}
    }</style>

这是第五帧的样式(看看和第四帧的不同)

        <style>@-webkit-keyframes frame5-animation {
0%   { opacity:1;}
81%  { opacity:1;}
82%  {z-index:9;}
99%  {z-index:9;}
99.99999%  {z-index:9;}
    }</style>
    <style>@-moz-keyframes frame5-animation {
    0%   { opacity:1;}
81%  { opacity:1;}
82%  {z-index:9;}
99%  {z-index:9;}
99.99999%  {z-index:9;}
    }</style>
    <style>@-oz-keyframes frame5-animation {
0%   { opacity:1;}
81%  { opacity:1;}
82%  {z-index:9;}
99%  {z-index:9;}
99.99999%  {z-index:9;}
    }</style>
    <style>@-ms-keyframes frame5-animation {
0%   { opacity:1;}
81%  { opacity:1;}
82%  {z-index:9;}
99%  {z-index:9;}
99.99999%  {z-index:9;}
    }</style>

加上我想有更流畅的过渡。前3个非常流畅，但速度比我希望的要慢，4-6个是即时过渡。我想在这两者之间找到一条"中间道路"。

1-3的样式转换是相同的，4-5可以看到，6的指数只是比5高。

谢谢。

Answer 1

关键帧动画是如何工作的?

动画简写:
animation: NAME, DURATION, TIMING-FUNCTION, DELAY, ITERATIONCOUNT, DIRECTION, FILL-MODE, PLAY-STATE

你的动画:animation: frame3-animation 30s infinite ease-in;
frame3-animation = NAME
30s = DURATION
infinite = ITERATION-COUNT
ease-in = TIMING-FUNCTION

你的问题

(如。你的要求是什么?

另外我想有更流畅的过渡。

我不知道你认为更平滑的过渡是什么。
你想转变什么?
你说的是什么关键帧/帧?
你认为怎样才能平稳过渡?

前3个相当顺利，但比我想要的慢

这个我可以帮助你:
如果你想让关键帧动画播放得更快，请在关键帧上设置一个更短的持续时间:

animation: NAME DURATION ITERATIONCOUNT; 
animation: frame3-animation 5s infinite ease-in;
animation: frame3-animation 2s infinite ease-in;
etc.

4-6是瞬间过渡。我想在这两者之间找到一条"中间道路"。

然后你必须设置动画的持续时间大于0，以避免出现即时过渡，小于30。

我猜你有问题

你在关键帧动画和不透明度中使用z-index，
所以我的猜测是，你是动画的一些元素出现和消失。

当在动画中使用z-index时，它会立即发生。

.frame {
  display: inline-block;
  border: 10px dotted pink;
  padding: 50px;
}
.bubble {
  position: relative;
  display: inline-block;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  opacity: 1;
}
.red {
  left: 10%;
  background-color: red;
  animation: shuffle 2s infinite;
}
.blue {
  left: -10%;
  background-color: blue;
  animation: shuffle2 2s infinite;
}
@keyframes shuffle {
  0% {
    opacity: 1;
    z-index: 10;
  }
  50% {
    opacity: 0.5;
    z-index: 0;
  }
  100% {
    opacity: 1;
    z-index: 10;
  }
}
@keyframes shuffle2 {
  0% {
    z-index: 0;
  }
  50% {
    z-index: 10;
  }
  100% {
    z-index: 0;
  }
}

<div class="frame">
  <div class="bubble red"></div>
  <div class="bubble blue"></div>
</div>

在上面的例子中，我调整了关键帧，这样当红色圆圈变得透明时，z-index就会发生变化。完成后，您可以看到蓝色圆圈跳到红色圆圈后面。z-index越高，它就越容易被点击。指针事件将作用于元素。

并不是所有的问题都能从包含代码中获益。但是，如果您的问题是与您编写的代码有关，则应该包含一些。但是不要只是复制你的整个程序!
• 如果可以创建一个可以链接到的问题的实时示例(例如，在http://sqlfiddle.com/或http://jsbin.com/上)，那么就这样做