Tilbage til oversigten

CSS sommerfugl

Dette var kun min anden CSS animation – og den første, der endte på forsiden af CodePen. Min telefon var rødglødende i et par timer, pga. notifikationer.

Det gav mig blod på tanden, og resulterede i en strøm af animations-demoer, over de næste par måneder.

Selve animationen er egentlig ret simpel. Den består af et billede af en sommerfugl, der er blevet delt i tre – et for hver vinge, og et for kroppen. De er positioneret op ad hinanden. Vingerne bliver derefter animeret med CSS (rotateY). Grunden til at det ser realistisk ud, er fordi jeg har lavet min egen timing function med cubic-bezier funktionen. Det er den, der gør, at vingerne “flakser”, fremfor bare at bevæge sig lineært frem og tilbage.

See the Pen CSS Butterfly by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.16999

Er du interesseret i et samarbejde?