css3动画/过渡/变换：如何使图像增长？ [英] css3 animation/transition/transform: How to make image grow?

问题描述

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

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)

我使用jquery .animate（），但它只是太浪费我的喜好...
我知道我可以使用：

I was using jquery .animate() but its just too choppy for my liking... I know I can use the :

-webkit-transform: scale(2);

但我希望它被设置为特定的大小..不只是图像大小的两倍或三倍

But I want it to be set to a specific size.. not just double or triple the image size.

任何帮助？

感谢

推荐答案

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

You're looking for the -webkit-transition property 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-transition-property 和 -webkit -transition-duration ：

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-property for the properties you want transitioned, and -webkit-transition-duration for the 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视觉效果。

Tested in Safari. The Safari team also posted a pretty good write-up on CSS Visual Effects.

然而，我也建议再看一看jQuery，因为较新的CSS3东西将不完全兼容的IE版本。

However, I would also recommend having another look at jQuery, as the newer CSS3 stuff won't be fully compatible with versions of IE.

这篇关于css3动画/过渡/变换：如何使图像增长？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！