CSS动画“；变换：缩放“；不适用于Safari和其他浏览器

它正在开发最新版本的Chrome（MacOSX），但在最新版本的Safari和较旧版本的Chrome（我想）中没有。有什么我需要添加的吗？

请不要添加

比例

尝试

缩放

，对于范围为100%的WebKit值，比例为1，1.5=150%，依此类推

添加以下代码并尝试

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

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

---

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

如果元素具有

display:inline

（例如是一个span），则Safari似乎不尊重您的比例。使其成为块或内联块

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

这是Safari 9。同样，iOS 9的移动Safari

Chrome没有这个问题。它将很高兴地改变内联元素的比例

---

JSFiddle查看它的作用：

除了-webkit transform之外，您是否尝试过在关键帧中使用其他“transform”指令？@ne1410s“translate”在我制作的另一个动画Safari中起作用，但我没有尝试过另一个“transform”宾果！我的元素是一个图标。我刚刚在动画类中添加了“display:block”，它现在可以工作了。很高兴，更改显示值不会影响任何其他内容。

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