💫 Fancy Blog-Titel mit einer Cubic-Bezier-Animation

Gestern Abend stolperte ich mal wieder über cubic-bezier.com. Die Seite ermöglicht es einem, mit Hilfe eines kleinen Kurvendiagrams eigene Animationsabläufe für eine Cubic-Bezier-Funktion zu erstellen. Und weil ich gerade Zeit und Lust hatte etwas rumzuprobieren, habe ich den Titel des Blogs oben links mal direkt ein bisschen "besonders" animiert. Ich mag das kleine Detail sehr gern, ansonsten verwende ich im Theme nur die Standard-Animationen linear und ease-in-out.

Ganz witzig finde ich die Erkenntnis, dass man mit negativen Werten sozusagen "Anlauf" nehmen kann. Während das hier im Titel nur an der Animation sieht, die kurz kleiner wird, erkennt man das auch an der Farbe im unten eingebauten Pen ganz gut. Bevor die Schrift dunkler wird, leuchtet sie kurz heller auf. Noch ein kleines Detail: Im Pen animiere ich einen einfachen Text, der leider während der Animation ein bisschen verschwimmt. Hier im Blog animiere ich ein SVG, das bleibt schön scharf.

Der Aufwand im Code ist unfassbar gering: Eine transition im Element, ein transform im hover. Seht her:

See the Pen Cubic-Bezier by Martin Schneider (@schneyra) on CodePen.