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教程这个片段，我已经注意到，它也发生在他们的演示（view example - ＆GT;选择名为过渡缩小/缩小），所以我想知道它是否只是一个FF错误或者有一个修复。也许有人可以在PC + FF上测试它，让我知道它是否有效。

非常感谢！

更新：这是我创建的fiddle。如您所见，当容器宽度> 1时，Firefox上会出现问题。比图像大小。

Answer 1

除此之外，还有更多内容。

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

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

在你的小提琴中，你还没有提供所有必需的文件，因此它甚至不会浏览所有幻灯片，所以必须重新创建整个内容以深入了解它是如何工作的。

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

Firefox上的CSS规模转换问题

1 个答案: