Animate вращение на "CSS3"

Question

Если у меня есть эта box в 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 transitions так:

-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

Используйте анимацию 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); } 
} 

Answer 4

Вот что вы пытаетесь сделать:

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

Это важно помнить, но происхождение и переходные свойства в классе/идентификатор элемента, который вы пытаетесь оживить , а не класс, представляющий анимированное состояние.

Приветствия