如何用css慢慢改变规模？

Question

我现在有这样的话：

http://jsfiddle.net/9DGb2/

但出于某种原因，我将css更改为：

div {
    width: 200px;
    height: 100px;
    background-color: yellow;
}
div:hover {
    -moz-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    -o-transform: scale(1.05) slow;
    -ms-transform: scale(1.05) slow;
    -webkit-transform: scale(1.05) slow;
    transform: scale(1.05) slow;
}

它不会工作。

所以我猜这不可能这样做？

Answer 1

您需要添加transition

-webkit-transition: transform 2s ease-in-out;

JS Fiddle Demo

有关详细信息，请参阅：Using CSS Transitions

Answer 2

在其他浏览器中转换

div:hover {
    -moz-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    -o-transform: scale(1.05);
    -ms-transform: scale(1.05);
    -webkit-transform: scale(1.05);
    transform: scale(1.05);

    -webkit-transition: transform 1.05s ease-in-out;
    -moz-transition:transform 1.05s ease-in-out;
    -ms-transition:transform 1.05s ease-in-out;
}