rantanplan2000
Mitglied
Hallo,
ich möchte ein Keyframe über Hover starten. Das geht auch wunderbar.
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.
ich möchte ein Keyframe über Hover starten. Das geht auch wunderbar.
Code:
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.
Zuletzt bearbeitet: