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