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

Question

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

我发了第三个和第四个，因为它们不同而且可以看到。

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

第 3 帧

<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 个是即时过渡。我想在这 2.

之间有 "a middle way"

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

您的问题

（例如，您在问题中的要求）

Plus I'd like to have smoother transitions.

我不知道你认为什么是更平滑的过渡。
你想过渡什么？
keyframe/frame 你在说什么？
您认为什么是平稳过渡？

The first 3 go quite smooth, but are slower that I'd like

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

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

4-6 are instant transitions. I'd like to have "a middle way" between these 2.

然后你必须将动画的 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 中的一些要点：

以供将来参考

并非所有问题都受益于包含代码。但是，如果您的问题出在您编写的代码上，则您应该包含一些代码。但不要只是复制整个程序！
如果可以创建一个您可以 link 解决的问题的实例（例如，在 http://sqlfiddle.com/ or http://jsbin.com/ 上），那么就这样做

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

Html/css keyframe transition not working in IE and Firefox properly

html

keyframe

css-transitions

css-animations

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

您的问题

（例如，您在问题中的要求）

我猜你有什么问题