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

Question

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

我发布了第 3 次和第 4 次，因为它们是不同的并且可以看到。

我的问题是，在 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>

这是第 4 帧。 我在动画中使用了 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>

这是第 5 帧的样式（看看与第 4 帧的区别）

        <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 = @ 987654334@

您的问题

（例如，您对问题的要求）

另外，我希望有更平滑的过渡。

我不知道您认为更平滑的过渡是什么。
你想转换什么？
你在说什么关键帧/帧？
您认为什么是平稳过渡？

前 3 个运行相当顺利，但我想要的速度较慢

这个我可以帮你：
如果您希望关键帧动画更快，请在关键帧上设置更短的持续时间：

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

4-6 是即时转换。我想在这两者之间有一个“中间道路”。

然后您必须将动画的 DURATION 设置为大于 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 将使其可点击，例如。指针事件将作用于元素。

这里有一些来自How do i ask good questions的点供将来参考：

• 并非所有问题都受益于包含代码。但是如果你的问题是你写的代码，你应该包括一些。但不要只是复制整个程序！
• 如果可以创建一个可以链接到的问题的实时示例（例如，在 http://sqlfiddle.com/ 或 http://jsbin.com/ 上），那么就这样做