CSS变换缩放不工作在Chrome, Safari

Question

我看过不同的答案张贴在这里，但没有一个对我有效…

什么:我有一个div被缩放到0.6，当被调用时应该缩放到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)}
}

在这些关键帧中，你错过了一些东西。所有的transform属性都没有浏览器支持的前缀。例如:

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

我给transform属性添加了-webkit- prefix，现在它将在Google Chrome和Safari中显示。

旁注:你可能有一些不必要的代码块。-moz-，-ms-和-o-.