Firefox 上的 CSS 比例转换问题

Question

我正在研究 CSS 比例转换，并且在 Firefox (Mac) 上发现了一些问题。简而言之，我有 2 个 div，前者缩小并淡出:

@-webkit-keyframes scaleDownTo {
  to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleDownTo {
  to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleDownTo {
  to { opacity: 0; transform: scale(.8); }
}

后者缩小并淡入:

@-webkit-keyframes scaleDownFrom {
  from { opacity: 0; -webkit-transform: scale(1.5); }
}
@-moz-keyframes scaleDownFrom {
  from { opacity: 0; -moz-transform: scale(1.5); }
}
@keyframes scaleDownFrom {
  from { opacity: 0; transform: scale(1.5); }
}

问题出在出现的 div 上:在转换过程中，当它出来时，大小没有覆盖父 div 并且其位置锚定在顶部左 Angular 。当转换结束时，div 突然获得其原始大小和位置。

注意:我在 Codrops 教程中找到了这个片段，并且我注意到它也发生在他们的演示中( view example -> 选择名为 SCALE DOWN/SCALE DOWN 的转换) ，所以我想知道这是否只是 FF 的错误，或者是否有解决方案。也许有人可以在 PC+FF 上测试一下，让我知道它是否有效。

非常感谢!

更新:这是 fiddle我创建的。正如您所看到的，当容器宽度大于图像大小时，Firefox 上就会出现此问题。

Answer 1

这比您所展示的更多。

我使用 Owl Slider 重新创建了(根据您提供的内容)旋转木马。首先，这个 slider 有一些固有的问题，例如 IE 中对转换的支持 - IE 中不支持它们 - 人们被警告。

其次，当我在 Firefox 中使用 animation-delay: 时，它会破坏动画，如果它不存在，则动画会正常工作；尽管没有延迟——在这种情况下我可以忍受。我想说这是你的问题，因为它会按照你的描述重置图像，并且动画在那之后继续。

在您的 fiddle 中，您没有提供所有必需的文件，因此它甚至没有遍历所有幻灯片，因此必须重新创建整个内容才能深入了解它的工作原理。

请参阅我的演示以进行说明> http://codepen.io/mofeenster/pen/smwAD