Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. CSS Animation
Webdesign

15 inspirierende Beispiele für CSS Animation auf CodePen

by
Length:LongLanguages:

German (Deutsch) translation by Katharina Nevolina (you can also view the original English article)

CodePen entwickelt sich schnell zum Ort, um zu zeigen, was wir mit unseren Web-Kreationen machen können.  Hier ist eine Liste der großartigen Sachen, die Leute in letzter Zeit mit CSS Animationen erstellt haben!

1. JavaScript Mickey Uhr

Apple Uhr wie Mickey Uhr von Jay Salvat (@jaysalvat).

Das ist ein schönes Beispiel für die Kombination von CSS-Übergängen, SVG-Grafiken und JavaScript, um die Hände auf einem niedlichen Mickey-Mouse-Zifferblatt zu positionieren.

2. CSS-U-Boot

U-Boot mit CSS von Alberto Jerez (@ajerez).

Die Verwendung des runden Portlochcontainers verleiht diesem CSS-animierten U-Boot viel Charme.

3. ASCII AT-AT

AT-AT von Tim Pietrusky (@TimPietrusky).

Star Wars inspirierte AT-AT-Personalträger, gezeichnet mit Text mit den Farben, die in CSS durchlaufen wurden.  Ein funky Effekt.

4. SVG/CSS-Lader

Lader SVG/CSS von Bidji (@Bidji).

Dieser Lader verwendet die wechselnden Farben, um den Eindruck von Rotation zu erwecken.

5. 3D CSS Tardis

3D CSS Tardis von Gerwin van Royen (@Gerwinnz).

CSS kann verwendet werden, um einige erstaunliche 3D-Effekte zu erstellen.  Hier ist eine 3D-Tardis:

6. Dösender Vogel

Dösender Vogel von Peter Klein (@pmk).

Schlichter Kunststil und genau die richtige Menge an Animation verleihen diesem schläfrigen Vogel die Illusion des Lebens.

7. Reine CSS-Randanimation

Reine CSS-Randanimation ohne SVG von Rplus (@rplus).

Einfache, aber sehr effektive Verwendung von CSS-Rahmen, um eine animierte Animation zu erstellen.

8. Star Wars: Die Macht erwacht

Star Wars: Die Macht erwacht in CSS von Donovan Hutchinson (@donovanh).

Der Titel aus dem kommenden Star Wars-Film wurde mit CSS, HTML und ein wenig JavaScript erstellt.

9. 3D-Synth

Pure CSS 3D Synthesizer (Mausklick für Rotation) von Nikolay Talanov (@suez).

Probieren Sie die Tasten aus und drehen Sie diesen 3D-Synthesizer, der mit CSS erstellt wurde.  Erstaunliche Arbeit: 

10. Cascading Sonnensystem

Kaskadierendes Sonnensystem! von Tady Walsh (@tadywankenobi).

Ein Modell unseres Sonnensystems, komplett mit skalierter Rotationsgeschwindigkeit, Monden und Details auf jedem der größeren Planeten.  Die Sonne ist sogar eine Live-Aufnahme des echten Dinges!

11. 3D-Sonnensystem

Volles CSS 3D Sonnensystem von Wayne Dunkley (@waynedunkley).

Ein anderes Sonnensystem, aber diesmal in 3D.  Schöne Verwendung von Schattierungen.

12. Flache Designkamera

Flache Designkamera mit CSS Animation von Damien Pereira Morberto (@damienpm).

Drücken Sie den Auslöser dieser flachen Kamera, um ein Foto mit CSS-Animation zu erstellen.

13. Tag und Nacht Übergang

Tag Nacht Simulation von Szymon Stypa (@Catagen).

Drücken Sie die Taste, um den Tag in die Nacht umwandeln zu sehen.

14. Animierter Sprite mit CSS

Animieren Sie Sprite mit CSS von Avaz Bokiev (@samarkandiy).

Eine Demonstration, wie eine Sequenz von Bildern (Sprite) verwendet werden kann, um eine Stop-Motion-Animation mit Vorwärts- und Rückwärtsbewegung zu erstellen.

15. Dodekaeder

Dodekaeder von wontem (@wontem).

Ein subtiles, wunderschönes Dodekaeder, das komplett mit CSS erstellt und animiert wurde.

Schlussfolgerung

Vor kurzem, hätten wir uns auf Flash- oder JavaScript-Werkzeuge für jede In-Browser-Animation gestützt.  Moderne Browser haben bessere Unterstützung für CSS mit hardwarebeschleunigtem 3D und Animation geboten.

Dank Websites wie CodePen können wir leichter teilen und lernen als je zuvor.  Was sind einige der inspirierendsten Animations-Demos, die Sie in letzter Zeit gesehen haben?

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.