css3动画/转换/转换：如何使图像增长？

Question

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

我正在使用jquery .animate（），但它根本不是我的喜好......我知道我可以使用：

-webkit-transform: scale(2);

但我想将它设置为特定的大小..不仅仅是图像大小的两倍或三倍。

有帮助吗？

谢谢

Answer 1

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

在这种情况下，您可以简单地定义开始和结束高度（我在下面的示例中同时执行了高度和宽度）以及为要转换的属性定义-webkit-transition-property ，以及-webkit-transition-duration for持续时间：

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 Visual Effects的非常好的文章。

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