10 oddly satisfying CSS Animationen

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!

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)

See the Pen Oddly satisfying loading indicator (CSS only) by eight (@eight) on CodePen.

2. Oddly satisfying CSS Only animation

See the Pen Oddly satisfying CSS Only animation by eight (@eight) on CodePen.

3. The Last Experience

See the Pen The Last Experience by ByteKnight (@byteknight) on CodePen.

4. Campfire

See the Pen campfire by ByteKnight (@byteknight) on CodePen.

5. Growing pastel dots

See the Pen growing pastel dots by Rachel Smith (@rachsmith) on CodePen.

6. Rainbow lines

See the Pen Rainbow lines by ByteKnight (@byteknight) on CodePen.

7. Mesmerizing

See the Pen Mesmerizing by xposedbones (@xposedbones) on CodePen.

8. Animation Test

See the Pen Animation Test – Creeper Lines animated by xposedbones (@xposedbones) on CodePen.

9. Musical background on mousemove

See the Pen Musical background on mousemove by ByteKnight (@byteknight) on CodePen.

10. Tuchet 13

See the Pen Truchet 13 by Liam Egan (@shubniggurath) on CodePen.

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!

• Coole CSS Buttons
• Kreative 404-Error Seiten
• CSS Navigation Menus
• CSS Hamburger Menus
• Inspirierende Ladeanimationen