120

したがって、次のように、マウス アウト時にアニメーションを逆にすることができます。

.class{
   transform: rotate(0deg);

}
.class:hover{
   transform: rotate(360deg);
}

しかし、 @keyframes アニメーションを使用すると、動作しませんでした。

.class{
   animation-name: out;
   animation-duration:2s;

}
.class:hover{
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;

}
@keyframe in{
    to {transform: rotate(360deg);}
}

@keyframe out{
    to {transform: rotate(0deg);}
}

反復とアニメーション自体が必要であることを知っている場合、最適なソリューションは何ですか?

http://jsfiddle.net/khalednabil/eWzBm/

4

10 に答える 10

23

これは CSS アニメーションだけでは実現できないと思います。CSS トランジションはあなたのユース ケースを満たさないと仮定しています。たとえば、2 つのアニメーションを連鎖させたり、複数のストップや反復を使用したり、アニメーションが与える追加のパワーを何らかの方法で利用したりしたいからです。

JavaScript を使用して「over」および「out」クラスをアタッチせずに、特にマウスアウト時に CSS アニメーションをトリガーする方法を見つけられませんでした。基本 CSS 宣言を使用して、:hover が終了したときにアニメーションをトリガーすることはできますが、同じアニメーションがページの読み込み時に実行されます。「over」および「out」クラスを使用すると、定義をベース (ロード) 宣言と 2 つのアニメーション トリガー宣言に分割できます。

このソリューションの CSS は次のようになります。

.class {
    /* base element declaration */
}
.class.out {
   animation-name: out;
   animation-duration:2s;

}
.class.over {
   animation-name: in;
   animation-duration:5s;
   animation-iteration-count:infinite;
}
@keyframes in {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@keyframes out {
    from {
        transform: rotate(360deg);
    }
    to {
        transform: rotate(0deg);
    }
}

また、JavaScript (jQuery 構文) を使用して、クラスをイベントにバインドします。

$(".class").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
);
于 2013-07-13T02:51:12.900 に答える
6

requestAnimationFrame を使用してアニメーションをリセットし、ブラウザーが次のフレームでペイントするときに元に戻すことができます。

また、onmouseenter および onmouseout イベント ハンドラーを使用して、アニメーションの方向を逆にします。

通り

イベント ハンドラーでキューに入れられたすべての rAF は、同じフレームで実行されます。rAF でキューに入れられたすべての rAF は、次のフレームで実行されます。

function fn(el, isEnter) {
  el.className = "";
   requestAnimationFrame(() => {
    requestAnimationFrame(() => {
        el.className = isEnter? "in": "out";
    });
  });  
}
.in{
  animation: k 1s forwards;
}

.out{
  animation: k 1s forwards;
  animation-direction: reverse;
}

@keyframes k
{
from {transform: rotate(0deg);}
to   {transform: rotate(360deg);}
}
<div style="width:100px; height:100px; background-color:red" 
  onmouseenter="fn(this, true)"
   onmouseleave="fn(this, false)"  
     ></div>

于 2019-06-01T23:29:37.663 に答える
0

これを試して：

@keyframe in {
from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframe out {
from {
    transform: rotate(360deg);
  }
  to {
    transform: rotate(0deg);
  }
}

Firefox 5 以降、IE 10 以降、Chrome、Safari 4 以降、Opera 12 以降でサポート

于 2013-05-13T07:32:27.607 に答える