“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/

Answer 2

您可以像這樣使用CSS轉換 ：

-webkit-transition: all 1s ease-in-out;
-moz-transition: all 1s ease-in-out;
-o-transition: all 1s ease-in-out;
-ms-transition: all 1s ease-in-out;
transition: all 1s ease-in-out;

Answer 3

這是你要做的事情：

http://jsfiddle.net/fud4n/18/

重要的是要記住你想要動畫的元素的類/ id中的原點和過渡屬性，而不是表示動畫狀態的類。

干杯

Answer 4

像這樣使用CSS3動畫： http ： //jsfiddle.net/fud4n/15/ （僅為firefox提供的示例）。 這將執行連續旋轉，只需根據您的喜好更改持續時間。

#box.selected {    
    -moz-animation-name: rotation;  
    -moz-animation-duration: 2s;  
}

@-moz-keyframes rotation {
    from {  -moz-transform: rotate(0deg);  }      
    to   {  -moz-transform: rotate(30deg);  }
}