3

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 ローテーションにアニメーションを設定するにはどうすればよいですか? つまり、1 つのステップではなく、流動的です。したがって、動きは「アニメーション」でなければなりません。私の言いたいことを理解していただければ幸いです:)

4

4 に答える 4

5

変換にアニメーションを適用したいだけだと仮定すると、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/

于 2012-06-22T10:36:27.297 に答える
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;
于 2012-06-22T10:37:24.970 に答える
1

これがあなたがやろうとしていることです：

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

アニメーション化しようとしている要素の class/id の origin プロパティと transition プロパティを覚えておくことが重要です。アニメーション化された状態を表すクラスではありません。

乾杯

于 2012-06-22T10:50:10.737 に答える
0

次のような 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);  }
}
于 2012-06-22T10:50:01.123 に答える