web-dev-qa-db-ja.com

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

そのため、次のようなマウスアウトで逆アニメーションを使用することができます。

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

csscss3animation
73
Khaled

toがある場合、fromを使用する必要があると思います。私は次のようなものを考えるでしょう：

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

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

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

  • Chromeは@-webkit-keyframesを使用します。特定のバージョンは不要です
  • Safariは、バージョン5以降の@-webkit-keyframesを使用します
  • Firefoxはバージョン16以降@keyframesを使用します（v5-15は@-moz-keyframesを使用しました）
  • Operaは@-webkit-keyframesバージョン15-22を使用します（v12のみが@-o-keyframesを使用）
  • Internet Explorerはバージョン10以降から@keyframesを使用します

編集：

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

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

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

51
Xaltar

CSSアニメーションのみを使用してこれを達成できるとは思わない。 CSSトランジションdo notがユースケースを満たしていると想定しています。たとえば、2つのアニメーションを連結し、複数のストップ、イテレーションを使用したり、その他の方法で追加のパワーアニメーション付与を活用したりするためです君は。

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');
    }
);
13
Giles Copp

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

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

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

13
Jordan Lafland

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

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>
6
ctf0

アニメーションを1つだけにして、逆にした方が良いでしょうか？

animation-direction: reverse
5
Andrew Lazarus

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>
1
Shishir Arora

これを試して：

@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以降でサポート

0
Ansipants