9 coole und inspirierende CSS Animationen (Oddly satisfying!)

9 coole und inspirierende CSS Animationen (Oddly satisfying!) Thumbnail
Veröffentlicht am 15. September 2019Zuletzt aktualisiert am 29. April 2021

Manchmal reicht es nach einem langen, anstrengenden Tag sich etwas schönes anzuschauen. Dafür eigenen sich „satisfying“ Videos oder Bilder sehr gut. Dass das auch mit CSS und JavaScript geht, seht ihr in diesem Beitrag!

Anzeige

Satisfying bedeutet zu deutsch, sowas wie „zufriedenstellend“. Solche Animationen sind einfach schön und beruhigend anzusehen. Genial ist das, wenn sie einen tiefern nutzen haben, wie das erste Beispiel als Ladeanimation. Lass‘ dich einfach überraschen, was das Web alles zu bieten hat.

Manche Animationen sind interaktiv. Hover einfach mal drüber und klick mit der Maus darauf.

Die gezeigten Pens sind mit MIT lizensiert. Mehr Infos zur eigenen Nutzung findest Du im Codepen Blog.

1. Oddly satisfying loading indicator (CSS only)

2. Oddly satisfying CSS Only animation

Anzeige

3. The Last Experience

4. Campfire

5. Growing pastel dots

6. Rainbow lines

7. Mesmerizing

8. Animation Test

Anzeige

9. Musical background on mousemove

10. Tuchet 13

Ich hoffe, die Animationen konnten dich etwas beruhigen oder haben Dich teilweise fasziniert und motiviert für neue Projekte. Kreative Phasen sind für uns wichtig und wir sollten uns täglich Zeit nehmen um etwas abzuschalten.

Hinweis: Alle Buttons sind alle auf codepen.io veröffentlicht und nicht von mir.

Noch nicht genug? Dann könnte das etwas für Dich sein!

Ähnliche Beiträge
💬 Beteilige dich an der Unterhaltung

2 Kommentare

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.