1

如果删除动画，为什么 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;
}
4

0 回答 0