Fareyle üzerine geldikten sonra fare dışarıdayken bir animasyonu tersine çevirme

Bu nedenle, aşağıdaki gibi fare üzerinde ters animasyon yapmak mümkündür:

.class{
   transform: rotate(0deg);

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

ancak @keyframes animasyonunu kullanırken, çalışmasını sağlayamadım, örneğin:

.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);}
}

Yinelemelere ve animasyonun kendisine ihtiyacım olduğunu bilerek en uygun çözüm nedir?

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

Eğer bir a tosahipseniz, bir from. Şöyle bir şey düşünürdüm:

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

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

Tabii ki zaten kontrol etmiş olmalıyım, ancak transformözelliği yalnızca CSS3 her yerde tam olarak uygulanmadığından kullanmanız garip geldi . Belki aşağıdaki hususlarla daha iyi sonuç verir:

• Chrome kullanır @-webkit-keyframes, belirli bir sürüme gerek yoktur
• Safari, @-webkit-keyframes5+ sürümünden beri kullanıyor
• Firefox, @keyframessürüm 16'dan beri kullanıyor (v5-15 kullanıldı @-moz-keyframes)
• Opera, @-webkit-keyframes15-22 sürümünü kullanır (yalnızca v12 kullanılır @-o-keyframes)
• Internet Explorer, @keyframes10+ sürümünden beri kullanıyor

DÜZENLE :

O kemanla geldim:

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

Minimum kod kullanma. Beklediğiniz şeye yaklaşıyor mu?

Tüm bunlardan çok daha kolay: Öğenizdeki aynı özelliği kolayca değiştirin

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

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

Bunun sadece CSS animasyonları kullanılarak gerçekleştirilebileceğini düşünmüyorum. CSS geçişleri olduğunu varsayıyorum yok (örneğin) İki animasyonlar birlikte zincire istiyorum çünkü, sizin kullanım örneğini yerine getirmek birden durur, yineleme veya başka bir şekilde ilave güç animasyonlar sizi hibe istismar kullanın.

"Over" ve "out" sınıflarını eklemek için JavaScript kullanmadan, özellikle fareyi uzaklaştırmada bir CSS animasyonunu tetiklemenin bir yolunu bulamadım. Temel CSS bildirimini kullanabilmenize rağmen: hover bittiğinde bir animasyonu tetikleyebilseniz de, aynı animasyon sayfa yüklendiğinde de çalışacaktır. "Over" ve "out" sınıflarını kullanarak tanımı temel (yük) bildirimine ve iki animasyon-tetikleyici bildirimine bölebilirsiniz.

Bu çözüm için CSS şu şekilde olacaktır:

.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);
    }
}

Ve sınıfları olaylara bağlamak için JavaScript (jQuery sözdizimi) kullanma:

$(".class").hover(
    function () {
        $(this).removeClass('out').addClass('over');
    },
    function () {
        $(this).removeClass('over').addClass('out');
    }
);

Tersine çevrilmiş bir animasyon oluşturmak, basit bir problem için biraz abartılıdır, ihtiyacınız olan şey

animation-direction: reverse

ancak bu kendi başına çalışmaz çünkü animasyon özelliği o kadar dökülür ki animasyonu yeniden başlatmanın bir yolunu eklemeyi unuttular, işte js yardımıyla bunu nasıl yaparsınız

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>

Tek bir animasyona sahip olsanız daha iyi olur mu, ama onu tersine çevirmek mi?

animation-direction: reverse

Animasyonu sıfırlamak ve tarayıcı sonraki kareyi boyadığında tersine çevirmek için requestAnimationFrame'i kullanabiliriz.

Ayrıca animasyon yönünü tersine çevirmek için onmouseenter ve onmouseout olay işleyicilerini kullanın

Göre

Olay işleyicilerinizde kuyruğa giren tüm rAF'ler aynı çerçevede yürütülecektir. Bir rAF'de sıraya alınan herhangi bir rAF, sonraki çerçevede yürütülecektir.

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>

Bunu dene:

@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+ sürümlerinde desteklenir

Burada birkaç çözüm denediniz, hiçbir şey kusursuz çalışmadı; Sonra biraz daha bulmak için web arandı GSAP de https://greensock.com/ (lisansa tabi, ama oldukça hoşgörülü olduğunu); lib'ye başvurduğunuzda ...

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

... gidebilirsin:

  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();
  });

Ve kusursuz çalışacak.