CSS Transform Scale 在 Chrome、Safari 中不起作用

Question

我查看了此处发布的不同答案，但没有任何效果对我有用...

内容：我有一个缩小到 0.6 的 div，调用时应该放大到 1（100%）。

问题：在 Firefox 中，#myDiv 正在按预期扩展，但在 Chrome 或 Safari（在 Mac 上）中没有任何反应。

我有这个 DIV 代码：

#myDiv {
-moz-animation: changeSize 1s ease-out .5s  forwards; /* Fx 5+ */
-webkit-animation: changeSize 1s ease-out .5s 0 forwards; /* Safari 4+ */
-o-animation: changeSize 1s ease-out .5s  forwards;  /* Opera */ 

-webkit-transform: scale(0.6);/* Saf3.1+, Chrome */
-moz-transform: scale(0.6); /* FF3.5+ */
-ms-transform: scale(0.6); /* IE9 */
-o-transform: scale(0.6); /* Opera 10.5+ */
transform: scale(0.6);

display: inline-block;
opacity:100;
background-image: url(img.png);
width: 154px;
height: 28px;
position: absolute;
left: 145px;
top: 5px;
}

以及放大过渡的关键帧动画：

@keyframes changeSize {
0% {transform:scale(0.6)}
100% {transform: scale(1)}
}


@-moz-keyframes changeSize  /* Firefox */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}

@-webkit-keyframes changeSize  /* Safari and Chrome */{
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}

@-o-keyframes changeSize  /* Opera */ {
0% {transform:scale(0.6)}
100% {transform:scale(1)}
}

HTML：

请告知我在这里缺少什么！

谢谢！

Answer 1

您的错误在这一行：

-webkit-animation: changeSize 1s ease-out .5s 0 forwards;

有一个不必要的0！

最后，

@-moz-keyframes changeSize  /* Firefox */ {
    0% {transform:scale(0.6)}
    100% {transform:scale(1)}
}

@-webkit-keyframes changeSize  /* Safari and Chrome */{
    0% {transform:scale(0.6)}
    100% {transform:scale(1)}
}

@-o-keyframes changeSize  /* Opera */ {
    0% {transform:scale(0.6)}
    100% {transform:scale(1)}
}

在这些关键帧中，您丢失了一些东西。所有转换属性都没有浏览器支持前缀。例如：

@-webkit-keyframes changeSize  /* Safari and Chrome */{
    0% {-webkit-transform:scale(0.6)}
    100% {**-webkit-**transform:scale(1)}
}

我在转换属性中添加了 -webkit- 前缀，现在它将显示在 Google Chrome 和 Safari 中。

旁注：您可能有一些不必要的代码块。-moz-、-ms- 和 -o-。