Firefox上的CSS缩放转换问题

我正在进行CSS缩放转换，并且我在Firefox（Mac）上发现了一些问题。总之我有2 divs，前者按比例缩小，并淡出：Firefox上的CSS缩放转换问题

@-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 - >选择所谓缩小/缩小过渡），所以我在想，如果这只是一个FF错误或有一个解决方案。也许有人可以在PC + FF上测试它，并让我知道它是否工作。

非常感谢！

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

来源

2013-12-20 user1861373

请建立一个小提琴 –

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

这是[小提琴]（http://jsfiddle.net/NwNDP/embedded/result/）。正如您所看到的，当容器宽度大于图像大小时，问题发生在Firefox上。 – user1861373

还有更多比你已经证明。

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

其次当我在Firefox中使用animation-delay:时，它会中断动画，如果它没有出现动画的作品;尽管没有延迟 - 在这种情况下，我可以忍受。我会说这是你的问题，因为它按照你描述的方式重置图像，动画在那之后继续。

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

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

来源

2014-06-20 12:15:01

Firefox上的CSS缩放转换问题

回答

相关问题