我试图了解是否可以animate使用 webkit 动画在 Jquery中复制该方法
假设我使用 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
我想知道如何做同样的事情，如果可能的话使用 CSS WebKit 动画
PS。我不需要他们在 Firefox 中工作，只是 Safari/Chrome 的一个项目
你可以使用这个 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;
}
然后您可以使用 jQuery 更新宽度和高度属性：
$(document).ready(function() {
$("div.mybox").css({"width": "100px", "height": "70px"});
});
因此，如果浏览器支持它，这将是动画的。但是，当然，考虑将这些属性放到一个单独的类中，并将这个类添加到元素中。您可以像这样使用 .addClass() 函数。
$(document).ready(function() {
$("div.mybox").addClass("enlarged");
});
或者，例如，您可以将它与 toggleClass 函数和单击事件一起使用（单击时框会放大，再次单击时会变为正常大小）。
$(document).ready(function() {
$("div.mybox").click(function() {
$(this).toggleClass("enlarged");
});
});
在这种情况下，属性应该在 CSS 类中定义。
div.mybox.enlarged {
width: 100px;
height: 70px;
}
此外，如果您希望动画在鼠标悬停时发生，那么您只需添加以下内容：
div.mybox:hover {
width: 100px;
height: 70px;
}
这种动画可以完全不使用 JS 来执行。
CSS3 将使这对您来说非常容易！它将添加一个过渡，您可以使用 更改尺寸:hover。这是示例 div：
<div id="mydiv">
<!-- Div content goes here -->
</div>
所以，你的 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/
而已！它会将其大小从 50x50px 调整为 100x70px。已在 Chrome 上测试，但尚未在 Safari 上测试。
@keyframes animationName {
0% {width: 50px; height:50px}
100% {width: 100px; height:70px}
}
您可以通过将 CSS 应用为新的 styleSheet 或内联样式来使用具有“动态”值的 CSS 动画和过渡，如下例所示：