"CSS3"上的动画旋转

Question

如果我在CSS3中有这个框(如果,据我所知,这不是CSS3,只是浏览器特定的):

HTML

<div id="container">
    <div id="box">&nbsp;</div>
</div>    ?

CSS

#container
{
    padding:100px;
}

#box
{
    width:200px;
    height:200px;
    background-color:red;
}

#box.selected
{
    transform: rotate(30deg);
    -ms-transform: rotate(30deg); /* IE 9 */
    -webkit-transform: rotate(30deg); /* Safari and Chrome */
    -o-transform: rotate(30deg); /* Opera */
    -moz-transform: rotate(30deg); /* Firefox */        
}
?

jQuery(仅用于管理盒子上的悬停)

$('#box').hover(
    function () {
        $(this).addClass('selected');
    },
    function () {
        $(this).removeClass('selected');
    }
);

如何将动画设置为css旋转？我的意思是,不是一步,而是流畅.因此,动画应该是"有生命的".希望你明白我的意思:)

Answer 1

假设您只想将动画应用于转换,您可以使用CSS3转换,特别是transition-property(定义哪些属性将具有转换)和transition-duration(指定从开始到完成的转换的持续时间).还有transition-timing-function,允许您使用以下任何一种转换模式:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n)

#box
{
    width:200px;
    height:200px;
    background-color:red;
    transition-property: all;
    transition-duration: 0.3s;
    /* Explicit above, can also use shorthand */
    -o-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -webkit-transition: all 0.3s;
    -ms-transition: all 0.3s;
    /* Also shorthand with the easing-function */
    -ms-transition: all 0.3s linear;
}

看看我对你的jsfiddle的修订 - > http://jsfiddle.net/fud4n/9/