@@Gunnar Bittersmann
Keine der Vendor-Präfix-Eigenschaften macht Sinn. Wenn einige davon je sinnvoll waren, ist das lange her. Da solltest du mal ausmisten.
Gerade gesehen, dass dir dasselbe in einem anderen Thread auch gesagt wurde.
Die Zeit für den Effekt ist bei dir zu lange. Val Head rät: Wenn man denkt, es sei gut, die Zeit nochmal durch 2 teilen. In deinem Fall sogar durch 3.
Was bei deinem Effekt auch stört: Am Ende verlangsamt sich die Bewegung und bleibt dann zielgenau stehen. Das wirkt unnatürlich; die Kompassnadel weiß ja nicht vorher, wo genau sie anhalten muss.
Die Nadel muss erstmal übers Ziel hinausschießen, um dann umzukehren. Das erreicht man mit
transition-timing-function: cubic-bezier(…)
. Beim Finden der passenden Parameter hilft Lea Verous Tool.
Jetzt im Codepen.
🖖 Stay hard! Stay hungry! Stay alive! Stay home!
“Turn off CSS. If the page makes no sense, fix your markup.” —fantasai