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

Question

我想让我的图片高度增加到1500像素（如果宽度没有自动调整，我可以轻松设置它），但希望它的宽度能够自动调整。

我曾尝试使用jQuery .animate()，但效果不太流畅。我知道我可以使用：

-webkit-transform: scale(2);

但我希望它被设置为特定的大小，而不仅仅是图片大小的两倍或三倍。

有什么帮助吗？

谢谢。

- Jenn

---

jQuery 太卡了？它几乎是使用 JavaScript 最快的方式。你需要在哪些浏览器上运行，以及你正在测试哪个浏览器？ - Mechlar

Answer 1

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

在这种情况下，您可以简单地定义起始和结束高度（我在下面的示例中同时定义了高度和宽度），并为要过渡的属性定义 -webkit-transition-property ，以及定义 -webkit-transition-duration 来设置动画的持续时间：

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版本完全兼容。

- Christopher Scott