CSS动画“transform:scale”在Safari和其他浏览器中不起作用

Question

@-网络工具包-关键帧缩放输入{来自{-webkit-transform:scale（0）；}到｛-webkit转换：scale（1）；｝}.animate登录{动画名称：scaleIn；动画持续时间：0.5s；}

它在最新版本的Chrome（Mac OSX）上运行，但在最新的Safari版本和较旧版本（我认为）的Chrome。我需要补充什么吗？

Answer 1

添加以下代码并尝试。

.animate登录{-webkit-animation:scaleIn；-webkit动画持续时间：0.5s；动画：scaleIn；动画持续时间：0.5s；}@-网络工具包-关键帧缩放输入{来自{-webkit-transform：比例（0）；}至{-webkit-transform：比例（1）；}}@关键帧scaleIn{来自{变换：缩放（0）；}至{变换：比例（1）；}}

Answer 2

我在设置缩放动画时注意到另一个Safari问题。

如果元素具有显示：内联（例如是跨度）。使其成为块或内联块。

这不是特定于动画的。它还用于在没有动画的情况下更改比例。

这是Safari 9。也可以使用iOS 9的Mobile Safari。

Chrome没有这个问题。它将愉快地更改内联元素的比例。

JSFiddle查看它的实际操作：https://jsfiddle.net/ca64gkma/5/

Answer 3

而不是规模尝试缩放，对于webkit值范围从100%到刻度1，1.5=150%，依此类推