9 Satisfying CSS + JS Animationen zur Entspannung

9 Satisfying CSS + JS Animationen zur Entspannung Thumbnail
Veröffentlicht am 15. September 2019Zuletzt aktualisiert am 22. Juni 2020

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.

Achtung: Die einzelnen Pens sind nicht von mir!

1. Oddly satisfying loading indicator (CSS only)

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

Anzeige

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.

Anzeige

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.

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.

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

Ähnliche Beiträge
Schreib einen Kommentar

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