ホバー後にマウスアウトでアニメーションを反転する方法

91

したがって、次のようなマウス出力で逆アニメーションを作成することができます。

.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/

css  animation 
— ハレド
ソース
ここのようなトランジションを使用する方が良いのではないでしょうか-jsfiddle.net/HQFby？
— piatek 2013年
答えはすでにstackoverflowに投稿されています。ここにリンクの説明を入力してください
— watereffect 2017年

回答:

61

を持っている場合はto、を使用する必要があると思いますfrom。私は次のようなことを考えます：

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

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

もちろん、すでにチェックしているはずですがtransform、CSS3がどこにでも完全に実装されているわけではないので、プロパティだけを使用するのは不思議です。たぶん、次の考慮事項でうまくいくでしょう：

  • Chromeは@-webkit-keyframes、特定のバージョンは必要ありません
  • Safariは@-webkit-keyframesバージョン5以降で使用しています
  • Firefoxは@keyframesバージョン16以降を使用しています（v5-15を使用@-moz-keyframes）
  • Operaは@-webkit-keyframesバージョン15-22を使用します（v12のみを使用@-o-keyframes）
  • InternetExplorerは@keyframesバージョン10以降で使用しています

編集：

私はそのフィドルを思いついた：

http://jsfiddle.net/JjHNG/35/

最小限のコードを使用します。それはあなたが期待していたものに近づいていますか？

— Xaltar
ソース
1
IE 10は、キーフレームアニメーションをサポートしています。
— dlev 2013年
4
これでトランジションは元に戻りますが、問題は、ホバートランジションが終了する前にマウスが外に出ていると、この「ジャンプ」が発生することです。いくつかの検索の後、要素の状態は、その「animation-fill-mode：forwards;」のために、終了回転位置から戻ることができるように「永続化」されている必要があります。使用できますが、動作しないようです。
— Khaled 2013年
21
@Xaltarアプリを最初にロードすると、最初のアニメーションは正方形にカーソルを合わせずに再生されます。その初期ロードアニメーションの発生を停止する方法はありますか？
— jlewkovich 2017年
2
リフレッシュした後、最初のアニメーションが単独で再生される解決策を見つけた人はいますか？ちょっと重要です。
— user26198 2419年
1
あなたが最初の時間を再生するアニメーションを抑制することができない場合は、この答えは最終的に役に立たない
— NearHuscarl
19

これよりもはるかに簡単です：要素の同じプロパティを移行するだけです 

.earth { width:  0.92%;    transition: width 1s;  }
.earth:hover { width: 50%; transition: width 1s;  }

https://codepen.io/lafland/pen/MoEaoG

— ジョーダン・ラフランド
ソース
4
ええ、でもこれは1つのプロパティだけが変更された場合にのみ機能します。
— マーカス
4
@マーカスtransition: border-color 0.3s, background-color 0.3s, color 0.3s;
— スクーツ
4
D：すごい迫力は、CSSは、私はいくつかのWebプログラミングやった最後の時以来、長い道のりを歩んできました
— フランツ・D.
5
彼はアニメーションについて尋ねています！
— iKamy
18

これはCSSアニメーションだけでは達成できないと思います。たとえば、2つのアニメーションを連鎖させたり、複数の停止や反復を使用したり、その他の方法で追加のパワーアニメーションを利用したりするため、CSSトランジションはユースケースを満たさないと想定しています。

JavaScriptを使用して「over」クラスと「out」クラスをアタッチせずに、特にマウスアウトでCSSアニメーションをトリガーする方法は見つかりませんでした。：hoverが終了すると、基本CSS宣言を使用してアニメーションをトリガーできますが、同じアニメーションがページの読み込み時に実行されます。「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');
    }
);
— ジャイルズコップ
ソース
8

反転アニメーションを作成することは、単純な問題に対してちょっとやり過ぎです。必要なのは 

animation-direction: reverse

ただし、アニメーションの仕様が非常にダンプであるため、アニメーションを再開する方法を追加するのを忘れているため、これはそれ自体では機能しません。jsを使用して行う方法は次のとおりです。

let item = document.querySelector('.item')

// play normal
item.addEventListener('mouseover', () => {
  item.classList.add('active')
})

// play in reverse
item.addEventListener('mouseout', () => {
  item.style.opacity = 0 // avoid showing the init style while switching the 'active' class

  item.classList.add('in-active')
  item.classList.remove('active')

  // force dom update
  setTimeout(() => {
    item.classList.add('active')
    item.style.opacity = ''
  }, 5)

  item.addEventListener('animationend', onanimationend)
})

function onanimationend() {
  item.classList.remove('active', 'in-active')
  item.removeEventListener('animationend', onanimationend)
}
@keyframes spin {
  0% {
    transform: rotateY(0deg);
  }
  100% {
    transform: rotateY(180deg);
  }
}

div {
  background: black;
  padding: 1rem;
  display: inline-block;
}

.item {
  /* because span cant be animated */
  display: block;
  color: yellow;
  font-size: 2rem;
}

.item.active {
  animation: spin 1s forwards;
  animation-timing-function: ease-in-out;
}

.item.in-active {
  animation-direction: reverse;
}
<div>
  <span class="item">ABC</span>
</div>
スニペットを展開

— ctf0
ソース
3

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>
スニペットを展開

— シシルアロラ
ソース
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以降、Opera12以降でサポート

— 参加者
ソース
0

ここでいくつかの解決策を試しましたが、完璧に機能するものはありませんでした。次に、Webをもう少し検索してhttps://greensock.com/でGSAPを見つけました（ライセンスが必要ですが、かなり寛容です）。libを参照したら..。

 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.4/gsap.min.js"></script>

... 行ってもいい：

  var el = document.getElementById('divID');    

  // create a timeline for this element in paused state
  var tl = new TimelineMax({paused: true});

  // create your tween of the timeline in a variable
  tl
  .set(el,{willChange:"transform"})
  .to(el, 1, {transform:"rotate(60deg)", ease:Power1.easeInOut});

  // store the tween timeline in the javascript DOM node
  el.animation = tl;

  //create the event handler
  $(el).on("mouseenter",function(){
    //this.style.willChange = 'transform';
    this.animation.play();
  }).on("mouseleave",function(){
     //this.style.willChange = 'auto';
    this.animation.reverse();
  });

そしてそれは完璧に動作します。

— Razvan_TK9692
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.