Question

为什么Firefox会将动画移回到开头，如果你将其移除，而webkit会将其重新锁定到起始位置？他们如何处理这个问题有什么不同吗？

我有一个动画，将记录套筒的图像向下翻转到观察者（3D）。这个想法是模拟翻阅记录。

当第一张图像翻转时，您可以看到背面图像出现并显示其背后的下一张图像。

它使用填充模式转发来停止动画结束，并且设置了一个回调监听器，用于更新“正面”图像，因为由于背面可见性，此时它已被隐藏。它实际上被更新为后面显示的图像，这样一旦它返回到起点，它就会转向下一个图像。完成后，我使用document.getElementById('flip_rec').className='';删除动画。这会将动画返回到起点，并使其准备好下次重新启动它。然后我更新现在隐藏的反向和后面的图像并设置一个标志以允许动画再次运行。

所有这一切都很重要，因为当我删除webkit中的图像时，它会立即将动画重新捕捉到开头 - 这很有效，因为您没有注意到图像已被替换的事实 - 但是使用Firefox它可以反转动画。因此，您会看到图像向后翻转，逐渐显示新的正面图像，并允许您查看背面图像更新。效果被破坏了。

这是我用来设置动画的CSS。

.flip1
{
-webkit-animation-name: mymove1;
   -moz-animation-name: mymove1;
        animation-name: mymove1;
-webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
        animation-duration: 1s;
-webkit-animation-timing-function: linear;
   -moz-animation-timing-function: linear;
       -animation-timing-function: linear;
     /*don't go back to that start! Yet.*/  
-webkit-animation-fill-mode: forwards; 
   -moz-animation-fill-mode: forwards;
        animation-fill-mode: forwards;
}

在Firefox中删除动画可以反转，但在webkit中它会重新开始

0 个答案: