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)

2. Oddly satisfying CSS Only animation

3. The Last Experience

4. Campfire

5. Growing pastel dots

6. Rainbow lines

7. Mesmerizing

8. Animation Test

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

5 Kommentare

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

bold italic underline strikeThrough
insertOrderedList insertUnorderedList outdent indent
removeFormat
createLink unlink
code

Das könnte dich auch interessieren