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似乎不尊重您的比例。使其阻止或内联阻止。

这不是特定于动画的。它也适用于无动画更改比例。

这适用于Safari 9.还有iOS 9的Mobile Safari。

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

JSFiddle在行动中看到它：https://jsfiddle.net/ca64gkma/5/

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

代替scale尝试zoom，对于webkits值，范围从100％作为比例1,1.5 = 150％等等

CSS动画“transform：scale”在Safari和其他浏览器中无效

3 个答案: