CSS 动画 "transform: scale"在 Safari 和可能的其他浏览器中不起作用

Question

@-webkit-keyframes scaleIn {
    from {-webkit-transform: scale(0);}
    to {-webkit-transform: scale(1);}
}

.animate-log-in {
  animation-name: scaleIn;
  animation-duration: 0.5s;
}

它适用于最新版本的 Chrome (Mac OSX)，但不适用于最新版本的 Safari 和旧版本(我认为)的 Chrome。有什么我需要补充的吗？

Answer 1

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

如果元素具有 display: inline(例如，是一个跨度)，Safari 似乎不尊重您的比例。使其成为 block 或内联 block 。

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

这是与 Safari 9 一起使用的。还有 iOS 9 的移动 Safari。

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

使用 JSFiddle 查看它:https://jsfiddle.net/ca64gkma/5/