64

ホバーすると無期限に回転する要素があります。ホバーアウトすると、アニメーションが停止します。単純：

@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to { 
        -webkit-transform: rotate(360deg);
    }
}

.elem:hover {
    -webkit-animation-name: rotate; 
    -webkit-animation-duration: 1.5s; 
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-timing-function: linear;
}

ただし、ホバーアウトすると、アニメーションが突然停止し、0 度に戻ります。アニメーションを元の位置に戻したいのですが、構文がわかりません。

どんな入力でも素晴らしいでしょう！

4

7 に答える 7

86

解決策は、.elem にデフォルト値を設定することです。しかし、このアニメーションは -moz では問題なく動作しますが、-webkit ではまだ実装されていません。

私があなたのものから更新したフィドルを見てください： http://jsfiddle.net/DoubleYo/4Vz63/1648/

Firefox では正常に動作しますが、Chrome では動作しません

.elem{
    position: absolute;
    top: 40px;
    left: 40px;
    width: 0; 
    height: 0;
    border-style: solid;
    border-width: 75px;
    border-color: red blue green orange;
    transition-property: transform;
    transition-duration: 1s;
}
.elem:hover {
    animation-name: rotate; 
    animation-duration: 2s; 
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes rotate {
    from {transform: rotate(0deg);}
    to {transform: rotate(360deg);}
}
<div class="elem"></div>

于 2011-11-03T10:17:36.070 に答える
16

簡単な実用的なソリューションは次のとおりです。

@-moz-keyframes spin { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }

.elem:hover {
    -webkit-animation:spin 1.5s linear infinite;
    -moz-animation:spin 1.5s linear infinite;
    animation:spin 1.5s linear infinite;
}
于 2015-06-06T17:44:24.070 に答える
1

数回試行しましたが、jsFiddle を機能させることができました (Webkit のみ)。

ユーザーが div に再び入るときのアニメーション速度にはまだ問題があります。

基本的には、現在の回転値を変数に設定し、その値を計算して (度に変換する)、マウスの移動とマウスの入力時にその値を要素に戻します。

jsFiddle をチェックしてください: http://jsfiddle.net/4Vz63/46/

ブラウザ間の互換性を追加する方法など、詳細については、この記事をご覧ください: http://css-tricks.com/get-value-of-css-rotation-through-javascript/

于 2011-12-28T23:23:07.577 に答える
0

Webキットで動作するjavascriptの実装は次のとおりです。

var isHovering = false;

var el = $(".elem").mouseover(function(){
    isHovering = true;
    spin();
}).mouseout(function(){
    isHovering = false;
});

var spin = function(){
    if(isHovering){
        el.removeClass("spin");

        setTimeout(function(){
            el.addClass("spin");

            setTimeout(spin, 1500);
        }, 0);
    }
};
spin();

JSFiddle： http: //jsfiddle.net/4Vz63/161/

バーフ。

于 2012-04-13T03:41:26.033 に答える
-1 
<script>
var deg = 0

function rotate(id)
{
    deg = deg+45;
    var txt = 'rotate('+deg+'deg)';
    $('#'+id).css('-webkit-transform',txt);
}
</script>

私がやっていることはとても簡単なことです...最初にグローバル変数を宣言します...そして変数を好きなだけインクリメントし、jqueryの.cssを使用してインクリメントします。

于 2013-02-13T08:27:19.423 に答える
-2

アニメーションが JavaScript で完了したら、元に戻すようにトリガーする必要があります。

  $(".item").live("animationend webkitAnimationEnd", function(){
    $(this).removeClass('animate');
  });
于 2011-11-03T17:27:37.580 に答える