web-dev-qa-db-ja.com

ホバー時の連続CSS回転アニメーション、ホバーアウト時の0度に戻るアニメーション

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

@-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度に戻ります。アニメーションを元の位置に戻したいのですが、構文の問題がいくつかあります。

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

csscss3css-animations
57
Gavin

解決策は、.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>
79
Yoann

簡単な作業ソリューションを次に示します。

@-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;
}
16
luizfelippe

クロスブラウザー互換のJSソリューション：

var e = document.getElementById('elem');
var spin = false;

var spinner = function(){
e.classList.toggle('running', spin);
if (spin) setTimeout(spinner, 2000);
}

e.onmouseover = function(){
spin = true;
spinner();
};

e.onmouseout = function(){
spin = false;
};
body { 
height:300px; 
}
#elem {
position:absolute;
top:20%;
left:20%;
width:0; 
height:0;
border-style: solid;
border-width: 75px;
border-color: red blue green orange;
border-radius: 75px;
}

#elem.running {
animation: spin 2s linear 0s infinite;
}

@keyframes spin { 
100% { transform: rotate(360deg); } 
}
<div id="elem"></div>
1
fsw

数回試してみましたが、jsFiddleを動作させることができました（Webkitのみ）。

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

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

JsFiddleを確認してください： http://jsfiddle.net/4Vz63/46/

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

1
triq6

以下は、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/

バーフ。

0
bendytree