css3动画/过渡/变换：如何使图像变大？

我想让我的图像高度增长到 1500px（希望宽度会自动调整大小，如果没有，我也可以轻松设置它）

我正在使用 jquery .animate() 但它对我来说太不稳定了...... 我知道我可以使用：

-webkit-transform: scale(2);

但我希望将其设置为特定尺寸......而不仅仅是图像尺寸的两倍或三倍。

有什么帮助吗？

Thanks

您正在寻找-webkit-过渡webkit 的属性。这允许您指定两个单独的 CSS 规则（例如，两个类），然后指定切换这些规则时要应用的过渡类型。

在这种情况下，您可以简单地定义开始和结束高度（我在下面的示例中同时定义了高度和宽度）以及定义-webkit-过渡属性对于您想要转换的属性，以及-webkit-过渡持续时间持续时间：

div {
    height: 200px;
    width: 200px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

div:hover {
    width: 500px;
    height: 500px;
    -webkit-transition-property: height, width;
    -webkit-transition-duration: 1s;
    -moz-transition-property: height, width;
    -moz-transition-duration: 1s;
    transition-property: height, width;
    transition-duration: 1s;
    background: red;
}

在 Safari 中测试。 Safari 团队还发布了一篇非常好的文章CSS 视觉效果.

不过，我还建议再看一下 jQuery，因为较新的 CSS3 内容不会与 IE 版本完全兼容。