it-swarm.com.de

So kehren Sie eine Animation beim Ausfahren mit der Maus um

Es ist also möglich, eine umgekehrte Animation mit der Maus auszuführen, wie zum Beispiel:

.class{
   transform: rotate(0deg);

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

bei Verwendung der @ keyframes-Animation konnte ich sie jedoch nicht zum Laufen bringen. Beispiel:

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

Was ist die optimale Lösung, wenn ich weiß, dass ich selbst Iterationen und Animationen benötigen würde?

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

73
Khaled

Ich denke, wenn Sie ein to haben, müssen Sie ein from verwenden. Ich würde an etwas denken wie:

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

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

Natürlich muss es bereits überprüft worden sein, aber ich fand es seltsam, dass Sie nur die Eigenschaft transform verwenden, da CSS3 nicht überall vollständig implementiert ist. Vielleicht würde es mit den folgenden Überlegungen besser funktionieren:

  • Chrome verwendet @-webkit-keyframes, keine besondere Version erforderlich
  • Safari verwendet @-webkit-keyframes seit Version 5+
  • Firefox verwendet @keyframes seit Version 16 (v5-15 verwendet @-moz-keyframes)
  • Opera verwendet @-webkit-keyframes Version 15-22 (nur v12 verwendet @-o-keyframes)
  • Internet Explorer verwendet @keyframes seit Version 10+

EDIT:

Ich habe mir diese Geige ausgedacht:

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

Mit minimalem Code. Nähert es sich dem, was Sie erwartet hatten?

51
Xaltar

Ich denke nicht, dass dies nur mit CSS-Animationen möglich ist. Ich gehe davon aus, dass CSS-Übergänge nicht Ihren Anwendungsfall erfüllen, da Sie (zum Beispiel) zwei Animationen miteinander verketten, mehrere Stopps, Iterationen verwenden oder auf andere Weise die zusätzlichen Power-Animationen ausnutzen möchten Sie.

Ich habe keine Möglichkeit gefunden, eine CSS-Animation speziell beim Ausfahren mit der Maus auszulösen, ohne JavaScript zum Anhängen von "over" - und "out" -Klassen zu verwenden. Obwohl Sie die Basis-CSS-Deklaration verwenden können, um eine Animation auszulösen, wenn der Hover endet, wird dieselbe Animation beim Laden der Seite ausgeführt. Mit den Klassen "over" und "out" können Sie die Definition in die Basisdeklaration (load) und die beiden Animations-Trigger-Deklarationen aufteilen.

Das CSS für diese Lösung wäre:

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

Und mit JavaScript (jQuery-Syntax) binden Sie die Klassen an die Ereignisse:

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

Es ist viel einfacher als all dies: Übertragen Sie einfach die gleiche Eigenschaft auf Ihr Element

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

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

13
Jordan Lafland

das Erstellen einer umgekehrten Animation ist ein bisschen übertrieben für ein einfaches Problem, das Sie brauchen

animation-direction: reverse

dies funktioniert jedoch nicht von alleine, da die Animationsspezifikation so einfach ist, dass sie vergessen haben, eine Möglichkeit zum Neustart der Animation hinzuzufügen

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

Wären Sie besser dran, wenn Sie nur eine Animation hätten, diese aber umgekehrt?

animation-direction: reverse
5
Andrew Lazarus

wir können requestAnimationFrame verwenden, um die Animation zurückzusetzen und umzukehren, wenn der Browser im nächsten Frame malt.

Verwenden Sie auch die Ereignishandler onmouseenter und onmouseout, um die Animationsrichtung umzukehren

gemäß

Alle in Ihren Event-Handlern anstehenden rAFs werden im selben Frame ausgeführt. Alle in einem RAF anstehenden RAFs werden im nächsten Frame ausgeführt.

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

Versuche dies:

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

unterstützt in Firefox 5+, IE 10+, Chrome, Safari 4+, Opera 12+

0
Ansipants