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

而不是 scale 尝试 zoom，对于范围从 100% 作为比例 1 的 webkit 值，1.5 = 150% 等等

Answer 2

添加以下代码并尝试。

.animate-log-in {
    -webkit-animation: scaleIn;
    -webkit-animation-duration: 0.5s;
    animation: scaleIn;
    animation-duration: 0.5s;
}
@-webkit-keyframes scaleIn {
    from {
        -webkit-transform: scale(0);
    }
    to {
        -webkit-transform: scale(1);
    }
}
@keyframes scaleIn {
    from {
        transform: scale(0);
    }
    to {
        transform: scale(1);
    }
}

Answer 3

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

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

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

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

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

JSFiddle 查看实际效果：https://jsfiddle.net/ca64gkma/5/

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

CSS animation "transform: scale" not working in Safari and possibly other browsers

css

safari