如何通过 webkit 动画缩放图像随着时间的推移

Question

我在一个简单的画廊中收集了一些图像，我想在鼠标悬停时从小到大平滑地转换。 我目前这样做的方法是在鼠标悬停时显示图像的实际大小，但在鼠标悬停时将其强制为特定大小，并使用 display:none 隐藏实际大小。

我想包含一些 webkit 转换在 1 秒内完成此操作以改进转换。我知道 webkit 是在两种状态之间转换一个元素但是无论如何我可以做到这一点。

我也想避免使用 JavaScript。

.reveal a .preview
{
    display: none;
}

.reveal a:hover .preview
{
    display: block;
    position: absolute;
    z-index: 1;
}

.reveal img
{
    background: #fff
    padding: 2px;
    vertical-align: top;
    width: 100px;
    height: 75px;
}

.reveal li
{
    background: #eee;
    display: inline;
    float: left;
    margin: 3px;
    padding: 5px;
    position: relative;
}

.reveal .preview
{
    border-color: #000;
    width: auto;
    height: auto;
}

Answer 1

如果没有 html（即 jsfiddle），我很难在您的代码中插入解决方案。但这是一个通用解决方案 http://jsfiddle.net/9QVae/2/

img
{
    width:100px;
    height:100px;
    background:red;
    transition:width 1s, height 1s;
    -moz-transition:width 1s, height 1s, -moz-transform 1s; /* Firefox 4 */
    -webkit-transition:width 1s, height 1s, -webkit-transform 1s; /* Safari and Chrome */
    -o-transition:width 1s, height 1s, -o-transform 1s; /* Opera */
}

悬停时：

img:hover
{
    width:200px;
    height:200px;
}

所以trick是指定要添加效果的css属性（即宽度） 然后指定事件的持续时间，即transition:width 1s; 然后在:hover 选择器下指定最终维度

注意：transition不在 IE 上工作