CSS css3 动画/过渡/变换：如何使图像增长？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3620587/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
css3 animation/transition/transform: How to make image grow?
提问by Jenn
I want to make my image grow to 1500px in height (and hopefully the width would just automatically re-size itself, if not, I could easily set it too)
我想让我的图像在高度上增长到 1500 像素（希望宽度会自动重新调整大小，如果没有，我也可以轻松设置它）
I was using jquery .animate() but its just too choppy for my liking... I know I can use the :
我正在使用 jquery .animate() 但它对我来说太不稳定了......我知道我可以使用：
-webkit-transform: scale(2);
But I want it to be set to a specific size.. not just double or triple the image size.
但我希望将其设置为特定大小。而不仅仅是图像大小的两倍或三倍。
Any help?
有什么帮助吗？
Thanks
谢谢
回答by Christopher Scott
You're looking for the -webkit-transitionproperty for webkit. That allows you to specify two separate CSS rules (for instance, two classes) and then the type of transition to be applied when switching those rules.
您正在寻找webkit的-webkit-transition属性。这允许您指定两个单独的 CSS 规则（例如，两个类），然后指定切换这些规则时要应用的转换类型。
In this case, you could simply define the start and end heights (I did both height and width in the example below) as well as defining -webkit-transition-propertyfor the properties you want transitioned, and -webkit-transition-durationfor the duration:
在这种情况下，你可以简单地定义起点和终点的高度（我做在下面的例子中高度和宽度）以及定义-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;
}
Tested in Safari. The Safari team also posted a pretty good write-up on CSS Visual Effects.
在 Safari 中测试。Safari 团队还发布了一篇关于CSS Visual Effects的非常好的文章。
However, I would also recommend having another look at jQuery, as the newer CSS3 stuff won't be fully compatible with versions of IE.
但是，我还建议再看看 jQuery，因为较新的 CSS3 内容不会与 IE 版本完全兼容。
