Firefox上的CSS规模转换问题

Question

我正在进行CSS级别的转换，我在Firefox(Mac)上发现了一些问题。简而言之，我有2个divs，前者缩小并淡出：

@-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，其位置固定在左上角。当转换结束时，div突然获得其原始大小和位置。

注意：我在Codrops教程中发现了这个片段，我注意到它也发生在他们的演示中(查看示例->选择名为SCALE DOWN/SCALE DOWN的转换)，所以我想知道这是一个FF错误，还是有修复方法。也许有人可以在PC+FF上测试它，让我知道它是否有效。

非常感谢！

更新：这是我创建的小提琴。正如您所看到的，当容器宽度大于图像大小时，问题就会发生在Firefox上。

Answer 1

这方面的内容比您所展示的要多。

我使用猫头鹰滑块重新创建了(基于您提供的)旋转木马。首先，这个Slider有一些固有的问题，比如IE中对转换的支持-它们在IE中不受支持-人们会被警告。

其次，当我在Firefox中使用animation-delay:时，它会破坏动画，如果它不呈现动画作品；尽管没有拖延——在这种情况下，我可以接受。我想说，这是你的问题，因为它会重置你所描述的图像，然后动画会继续。

在你的小提琴中，你没有提供所有需要的文件，因此它甚至没有在所有幻灯片中移动，所以整个东西必须重新创建，才能深入了解它的工作原理。

请参阅我的演示以获得澄清>http://codepen.io/mofeenster/pen/smwAD