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

前端之家收集整理的这篇文章主要介绍了CSS动画“transform:scale”在Safari和其他浏览器中无效前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

@-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.有什么需要补充的吗?

最佳答案
添加以下代码并尝试.

.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);
    }
}

猜你在找的CSS相关文章