[ERLEDIGT] Keyframe mit JavaScript oder jQuery starten

[rantanplan2000]

Hallo,

ich möchte ein Keyframe über Hover starten. Das geht auch wunderbar.

article:nth-child(1):hover .fa {
  animation: malen 700ms ease-in-out 0s;
  -webkit-animation: malen 700ms ease-in-out 0s;
  animation-iteration-count: 1;
  -webkit-animation-iteration-count: 1;
}

@keyframes malen {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-60deg);}
  100% { transform: rotate(0deg); }
}
 
@-webkit-keyframes malen {
  0%   { transform: rotate(0deg); }
  50%  { transform: rotate(-60deg);}
  100% { transform: rotate(0deg); }
}

Das Problem ist nur, wenn man mit der Maus aus dem article geht, bricht die Animation direkt ab. Schöner wär es, wenn es mit Hover gestartet wird, und dann einmal durchläuft, auch wenn man mit der Maus woanders hinfährt.

Ich schätze das kann js bzw. jQuery? Oder würdet ihr auf die "Verschönerung" aus Performancegründen verzichten? Wären ca. 10 verschiedene Objekte.

 

[rantanplan2000]

Das habe ich jetzt mal probiert:

$('#themen article:nth-child(4)').hover(
       function(){ $(this).addClass('info-hover') },
       function(){ $(this).removeClass('info-hover') }
)

aber das Prinzip ist das gleiche, wenn man raus fährt, ist die class ja weg bzw. welchen anderen code gibt es?

 

[rantanplan2000]

Super, funktioniert einwandfrei! danke :)