Firefox 上的 CSS 缩放转换问题

Posted 2023-03-06

【中文标题】Firefox 上的 CSS 缩放转换问题

【英文标题】：CSS scale transition issue on Firefox

【发布时间】：2014-01-09 05:52:30

【问题描述】：

我正在处理 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 教程中发现了这个 sn-p，我注意到它也发生在他们的演示中（view example -> 选择名为 SCALE DOWN / SCALE DOWN 的过渡>），所以我想知道这是否只是一个 FF 错误或者有一个修复程序。也许有人可以在 PC+FF 上测试它并告诉我它是否有效。

非常感谢！

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

【问题讨论】：

请设置小提琴

我不认为这是一个错误 - 他们只是重置为默认状态 - 不是吗？

这是fiddle。如您所见，当容器宽度大于图像大小时，Firefox 会出现此问题。

一切正常，Mac 上 FF 26

它运作良好。但在 Firefox 中，它会给出缓慢的响应，但可以正常工作。

【参考方案1】：

这比你所展示的要多。

我使用 Owl Slider 重新创建了（根据您提供的内容）一个轮播。首先，这个 Slider 有一些固有的问题，例如 IE 中对转换的支持 - 它们在 IE 中不受支持 - 警告人们。

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

在您的小提琴中，您没有提供所有必需的文件，因此它甚至没有在所有幻灯片中移动，因此必须重新创建整个东西才能了解它是如何工作的。

请查看我的演示以了解详情 > http://codepen.io/mofeenster/pen/smwAD