关键帧动画如何工作？

Question

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

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

我的问题是在Firefox中它在第4（1-2-3-4-4-4）帧停止并且没有继续到第5和第6，在IE中我只能看到第1和第2和它跳到了第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>

另外，我想要更顺畅的过渡。前三个很顺利，但是我喜欢慢，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是即时过渡。我希望在这两者之间有“中途”。

然后你必须将动画的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/上），那么

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

1 个答案:

关键帧动画如何工作？

您的问题

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

我猜你有