如何用css慢慢改变比例？答案

【问题标题】：how to slowly transform scale with css?如何用css慢慢改变比例？
【发布时间】：2014-09-26 23:44:21
【问题描述】：

我现在是这样的：

但由于某种原因，如果我将 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;
}

它不会工作。

所以我猜它不能这样做？

【问题讨论】：

你需要了解transition。
是什么让您认为可以为 CSS 转换指定速度？您是否在考虑jQuery？

标签： css transform scale

【解决方案1】：

您需要添加transition

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

JS Fiddle Demo

更多信息请咨询：Using CSS Transitions

【讨论】：

您应该将过渡添加到 div 本身，这样过渡可以双向进行（悬停和取消悬停）。更漂亮
@singe31 非常正确，他没有说明他想要两种方式，所以我认为不是，我更新了我的 JSFiddle 以反映这一点，MrLars 注意到 singe31 的评论！

【解决方案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;
}

【讨论】：