Javascript Css3 Webkit css 动画：调整 div 矩形的大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10144171/
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 Webkit css animations: resize a div rectangle
提问by Francesco
I'm trying to understand if is possible to replicate the method animatein Jquery, using webkit animations
我试图了解是否可以animate使用 webkit 动画在 Jquery 中复制该方法
Assuming i have a div 50px by 50 px using jquery I can easily resize and animate it using:
假设我使用 jquery 有一个 50px x 50 px 的 div，我可以使用以下方法轻松调整它的大小和动画：
$('#mybox').animate({'width':'100px','height':'70px'}, 300)
// so from 50x50 it animates to 100x70
// the values 100 and 70 should ba dynamically
// input so i can create a function (Width,Height) to alter my box
I wonder how to do the same, if possible using CSS WebKit animations
我想知道如何做同样的事情，如果可能的话使用 CSS WebKit 动画
PS. I dont need them to work in firefox, is just a project for a Safari/Chrome
附注。我不需要它们在 Firefox 中工作，只是 Safari/Chrome 的一个项目
回答by Arseny
You can use this CSS:
你可以使用这个 CSS：
div.mybox {
width: 50px;
height: 50px;
background-color: red;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
Then you can update the width and height properties using jQuery:
然后你可以使用 jQuery 更新宽度和高度属性：
$(document).ready(function() {
$("div.mybox").css({"width": "100px", "height": "70px"});
});
So, if the browser supports it, this will be animated. But, of course, consider putting these properties to a separate class and adding this class to the element. You can use the .addClass() function, like this.
所以，如果浏览器支持它，这将是动画。但是，当然，可以考虑将这些属性放到一个单独的类中，并将这个类添加到元素中。您可以像这样使用 .addClass() 函数。
$(document).ready(function() {
$("div.mybox").addClass("enlarged");
});
Or, for example, you can use it with the toggleClass function and the click event (the box will be enlarged when clicked, and will change to the normal size when click again).
或者，例如，您可以将其与 toggleClass 函数和单击事件一起使用（单击时框会放大，再次单击时将更改为正常大小）。
$(document).ready(function() {
$("div.mybox").click(function() {
$(this).toggleClass("enlarged");
});
});
In this case, the properties should be defined in the CSS class.
在这种情况下，属性应该在 CSS 类中定义。
div.mybox.enlarged {
width: 100px;
height: 70px;
}
Also, if you want the animation to happen on mouse over, then all you have to add is this:
此外，如果您希望动画在鼠标悬停时发生，那么您只需添加以下内容：
div.mybox:hover {
width: 100px;
height: 70px;
}
Animations of this kind can be performed without using JS at all.
可以完全不使用 JS 来执行此类动画。
Also, you should read about CSS3 transition attributeand the transform functions (they can be usable in many cases). They are described here.
回答by DaKoder
CSS3 will make this very easy for you! It will add a transition, and you can change the dimensions with :hover. Here's the sample div:
CSS3 将使这对您来说非常容易！它将添加一个过渡，您可以使用 更改尺寸:hover。这是示例 div：
<div id="mydiv">
<!-- Div content goes here -->
</div>
So, your div is "mydiv". The rest is done in CSS3:
所以，你的 div 是“mydiv”。其余的在 CSS3 中完成：
#mydiv {
width: 50px;
height: 50px;
background: #f34543;
-webkit-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-moz-transition:width 300ms ease-in-out, height 300ms ease-in-out;
-o-transition:width 300ms ease-in-out, height 300ms ease-in-out;
transition:width 300ms ease-in-out, height 300ms ease-in-out;
}
#mydiv:hover {
width: 100px;
height: 70px;
}
JSFiddle: http://jsfiddle.net/dakoder/ZGHLM/
JSFiddle：http: //jsfiddle.net/dakoder/ZGHLM/
That's it! It will resize it from 50x50px to 100x70px. Tested on Chrome, but not Safari, yet.
就是这样！它会将其大小从 50x50px 调整为 100x70px。已在 Chrome 上测试，但尚未在 Safari 上测试。
回答by WolvDev
@keyframes animationName {
0% {width: 50px; height:50px}
100% {width: 100px; height:70px}
}
take a look at this: http://www.css3files.com/animation/
回答by Mircea
You can use CSS animations and transitions with "dynamic" values by applying CSS as a new styleSheet or inline style as in this case:
您可以通过将 CSS 应用为新的 styleSheet 或内联样式来使用具有“动态”值的 CSS 动画和过渡，如下例所示：
