CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen

Fesselnde Animationen, die Ihren Blick halten, während eine Webseite geladen wird. Nahtlose Übergänge, die Sie mühelos durch die Inhalte einer Webseite führen. Unerwartete Farb- und Bewegungsausbrüche, wenn Sie mit Schaltflächen in einer App interagieren.

Obwohl subtil, beeinflussen diese Elemente stark Ihre Wahrnehmung einer Marke und Ihre gesamte digitale Erfahrung. Was bringt also diese ansprechenden Details zum Leben? Oft wird dies mit Hilfe von CSS-Animationen erreicht.

In diesem Leitfaden helfen wir Ihnen dabei mit:

• Eine Einführung in CSS und CSS-Animationen
• Wichtige Gründe, warum Sie CSS-Animationen ausprobieren sollten
• Einige Hindernisse bei der Einführung von CSS-Animationen (mit Lösungen)
• 17 vorbildliche CSS-Animationen für Ihre App oder Webseite
• Wie Sie damit beginnen, CSS auf Ihrer Webseite zu verwenden

CSS kennenlernen

CSS steht für Cascading Style Sheets.

CSS ist eine Programmiersprache, die bestimmt, wie grafische und Inhaltselemente auf einer Website oder Anwendung aussehen und agieren. CSS ist nützlich, um Farben und Schriftarten anzupassen, Elemente auf einer Seite zu positionieren und zu verteilen und natürlich, um Animationen zu erstellen. Es gibt „reine“ CSS-Animationen, die nur aus HTML (Hypertext Markup Language) und CSS-Code bestehen, und es gibt CSS-Animationen, die andere Arten von Code (wie JavaScript) oder bestehende Medien (wie GIFs) einbeziehen.

CSS kam in den frühen 1990er Jahren auf den Markt und hat sich seitdem von CSS1 zu CSS2 bis zu CSS3 entwickelt — die aktuelle und weit verbreitete Version. In diesem Artikel werden wir der gängigen Praxis folgen, den Begriff „CSS“ zu verwenden, wenn wir auf diese neueste Version Bezug nehmen.

HTML ist wie das Fundament und das Gerüst eines Hauses, ohne das das Haus nicht existieren kann. Aber CSS verwandelt dieses Haus mit Farbe, Veredelungen und Dekor, die einen einzigartigen Stil und Funktionalität verleihen.

CSS Animationsbaukästen

CSS-Animationen verwenden CSS-Code, um verschiedene Eigenschaften und Werte zu verknüpfen, die Bildschirmelemente „bewegen“.

CSS-Eigenschaften sind die Teile der Animationen, wie Hintergrund, Randradius, Schriftart, Randabstand, Bewegungsart (wie Drehen oder Verblassen) usw. Werte füllen die Details um diese Animationseigenschaften herum aus, indem sie Farbe, Ausrichtung, Größe, Dauer, Richtung, Geschwindigkeit usw. definieren.

Lassen Sie uns die Elemente der beliebten @keyframes Regel betrachten, die CSS-Übergänge während einer Animationssequenz definiert, um ein Beispiel dafür zu sehen, wie Eigenschaften und Werte zusammenarbeiten:

• Die Eigenschaft animation-name gibt den Namen der Animation an.
• Die Eigenschaft animation-duration beschreibt die Länge einer Animation. Werte werden typischerweise in Sekunden angegeben (0s, 4s usw.).
• Die Eigenschaft animation-delay legt einen verzögerten Animationsstart fest. Ihr Wert wird ebenfalls in Sekunden angegeben (-2s, 5s usw.).
• Die Eigenschaft animation-iteration-count gibt an, wie oft eine Animation ausgeführt werden soll. Der Wert repräsentiert, wie oft Sie die Animation wiederholen möchten; zum Beispiel wird infinite-alternate sie unendlich weiterlaufen lassen.
• Die Eigenschaft animation-direction gibt an, wie eine Animation abgespielt werden soll. Werte umfassen normal (vorwärts), reverse, alternate usw.
• Die Eigenschaft animation-timing-function beschreibt die Geschwindigkeitskurve. Werte umfassen ease-in-out für einen sanften Start und Ende, cubic-bezier um eine komplex aussehende Kurve zu erstellen usw.
• Die Eigenschaft animation-fill-mode definiert, wie ein Element aussieht, wenn die Animation nicht abgespielt wird. Werte umfassen forwards, um die Werte des letzten Keyframes zu behalten usw.

Jetzt bringen wir alles zusammen! In diesem Beispiel von W3Schools, das eine Animation (genannt „Beispiel“) an das <div> Element anhängt, können Sie sehen, dass das Element 100px Quadrat groß ist und einen roten Hintergrund hat. Wenn die Animation beginnt, wird sie 4 Sekunden lang fortgesetzt, während der Hintergrund von Rot zu Gelb übergeht:

/* Der Animationscode */
@keyframes Beispiel {
von {Hintergrundfarbe: rot;}
zu {Hintergrundfarbe: gelb;}
}

/* Das Element, auf das die Animation angewendet wird */
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 4s;
}

(Hinweis: Dies ist nur ein Beispiel. Keyframe-Animationen sind nicht die einzige Methode, um CSS-Animationen zu erstellen, und sie sind nicht mit jeder Browser-Version kompatibel — lesen Sie weiter für mehr Einblicke und Tipps zur Kompatibilität.)

3 großartige Gründe, CSS-Animationen zu implementieren

Von der Ermöglichung unvergesslicher Interaktionen bis hin zur Gewährleistung, dass diese mit der Geschwindigkeit moderner Erwartungen stattfinden, haben CSS-Animationen viel zur digitalen Erfahrung beizutragen — sowohl für Sie als auch für Ihre erstaunlichen Kunden oder Besucher.

Erstellen Sie eine einzigartige Geschichte und Erfahrung

Die Zeiten, in denen Websites als digitale Plakatwände fungierten, sind vorbei.

In der globalen Wirtschaft sind Websites und Apps Ihre beste Möglichkeit, Ihre Markengeschichte zu erzählen.

Warum sich auf Ihre Geschichte konzentrieren? Weil eine großartige Geschichte Ihre Marke abhebt, die Aufmerksamkeit Ihres idealen Publikums erregt, dauerhafte Verbindungen schafft und — vielleicht am wichtigsten — zum Handeln inspiriert.

Und Ihre Geschichte basiert teilweise auf den interaktiven Elementen, die Sie in Ihre Benutzererfahrung einbinden.

CSS-Animationen dreht sich alles darum, einzigartige Erfahrungen zu schaffen, die auf den Benutzer reagieren und sich mit ihm bewegen, um eine Beziehung und Engagement mit Ihrer Markengeschichte aufzubauen.

Neugestalten und warten mit weniger Tastenanschlägen

CSS ist eine organisierte und etwas knappe Programmiersprache. In der Welt der Webentwicklung wird sie als „sauber“ bezeichnet. Stylesheets können normalerweise auf ein Minimum beschränkt werden für einfache App- und Webprojekte.

Das bedeutet, wenn es Zeit ist, Ihr Projekt zu aktualisieren, routinemäßige Wartung durchzuführen oder einfach Ihr Aussehen und Erlebnis aufzufrischen — es sollte ziemlich schnell gehen, den Ort für die Änderung zu finden, Ihr Update zu erstellen und es über Ihre gesamte Schnittstelle anzuwenden. Keine Notwendigkeit, viele einzelne HTML-Dateien neu zu codieren und zu implementieren.

Optimieren Sie Ihre Geschwindigkeit

CSS wird im Vergleich zu JavaScript und anderen Programmiersprachen als „leichtgewichtig“ angesehen, was es zu einem großartigen Werkzeug macht, um Ihrem Produkt lebhafte, ansprechende Inhalte und Erfahrungen hinzuzufügen – ohne zusätzliches Gewicht, das das Laden verlangsamt.

Zusätzlich wird es auch aggressiv zwischengespeichert. Zusammen bedeuten diese Faktoren, dass Animationen, die mit CSS erstellt wurden, schnell nach dem ersten Klicken angezeigt werden sollten, sowie bei nachfolgenden Ladevorgängen Ihrer Website oder App.

Als ein wichtiger Rankingfaktor bei Google-Suchergebnissen ist Geschwindigkeit etwas, über das alle Unternehmen mit einer Online-Präsenz nachdenken sollten.

Überlegungen, bevor man sich in CSS-Animationen stürzt

Sie betreten nun die Verlangsamungszone. Bevor Sie kopfüber in CSS-Animationen einsteigen, gibt es ein paar kleine Hindernisse, über die wir sicherstellen möchten, dass Sie informiert und vorbereitet sind.

Kompatibilitätsbedenken

Haben Sie schon einmal bemerkt, wie einige Merkmale verschwinden oder stören, wenn Sie mit einer Website auf dem Telefon interagieren — oder Ihren Computer sehr verlangsamen?

Verschiedene Geräte (Mobiltelefone, Smartwatches, Tablets, Computer usw.) und Browser (Chrome, Safari, Firefox usw.) sind alle mit unterschiedlichen Technologien entwickelt. Diese Technologien bedeuten, wie sie mit Code-Sprachen interagieren können, variiert — und das ist bei CSS-Animationen nicht anders.

Wenn Sie keine benutzerdefinierten Anpassungen vornehmen, kann ein Animationseffekt, der auf Firefox mit Ihrem Laptop unglaublich cool aussieht, für jemanden, der ihn auf seinem Telefon mit Safari betrachtet, seltsam aussehen oder sich seltsam verhalten.

Qualitätssicherung (QA) Tests sind entscheidend, um sicherzustellen, dass Ihre CSS-Animationen überall kompatibel sind, wo Benutzer mit Ihrer digitalen Präsenz interagieren.

Lösung: Verwenden Sie einen CSS-Validator und Browser-Entwicklertools, um Kompatibilitätsprobleme und Fehler bei der Erstellung von CSS zu identifizieren. Diejenigen, die besonders code-versiert sind, können eine Sass Mixin-Bibliothek wie Bourbon installieren, um Browser-Prefixe (webkit für Chrome und Safari, moz für Firefox usw.) aktuell und kompatibel zu halten.

17 dynamische CSS-Animationen, die Sie heute ausprobieren sollten

Bereit, CSS-Animationen zu verwenden, um erstaunliche digitale Erlebnisse zu schaffen, die Benutzer anziehen und halten? Bereit, die so wichtige Seitengeschwindigkeit zu erhöhen und Wartungs- und Neugestaltungszeit zu reduzieren?

Dann sind Sie hier genau richtig! Wir haben einige großartige CSS-Animationen für Ihr Sehvergnügen zusammengestellt. Klicken Sie auf eine Option, die Ihnen gefällt, um den benötigten Code zu erhalten, und dann können Sie ihn Ihrem Website-Stylesheet hinzufügen. (Zur Information, öffentliche Pens auf CodePen sind laut ihren Lizenzdetails kostenlos von jedermann für jeden Zweck nutzbar.)

Ladeanimationen

Ladeanimationen sind vielleicht nicht die spannendste Klasse von CSS-Animationen, aber sie sind entscheidend für die Benutzererfahrung. App- und Website-Besucher sind eher bereit, eine kurze Ladezeit in Kauf zu nehmen, wenn du einen Indikator bereitgestellt hast, dass bald etwas Großartiges kommt.

1. “CSS Loader mit Punkten” von Aliaksei Peterson

Bis jetzt ist eine pulsierende Linie von Punkten universell für „Nur einen Moment!“ Wie der Code ist diese Option klar und prägnant, was sie zu einer guten Wahl für eine Online-Präsenz mit einem ernsten Ton oder minimalistischem Stil macht.

Siehe den Pen
CSS Loader mit Punkten von Aliaksei Peterson (@petersonby)
auf CodePen.

2. “Einfache HTML- & SVG-Ladespinner” von Stephen Delaney 

Ein weiteres klassisches Ladesymbol — der Spinner. Diese Animation bietet die Möglichkeit, eine SVG zu integrieren, was für Scalable Vector Graphic steht, die ohne Qualitätsverlust skaliert werden kann.

Siehe den Stift
Einfache HTML & SVG Ladespinner von Stephen Delaney (@sdelaney)
auf CodePen.

3. “Ladeanimation” von Mohamed Yousef

Dieses sich drehende Set aus tränenförmigen Formen bietet eine wunderschön einfache Animation, in der man sich verlieren kann, und macht eine kleine zusätzliche Ladezeit viel weniger ärgerlich. Was könnten Sie mehr verlangen?

Siehe den Pen
Ladeanimation von Mohamed Yousef (@Freeps2)
auf CodePen.

4. “Only Css Animation #02” von Hisami Kurita

Eine beeindruckende, reine CSS-Animation, die uns an den Besuch der Website eines gehobenen Restaurants oder Hotels erinnert. Ändern Sie die Farbe und den Namen, um sie an Ihre eigene Marke anzupassen.

Siehe den Pen
Nur CSS-Animation #02 von Hisami Kurita (@hisamikurita)
auf CodePen.

5. “Der Leuchtende Lader – Reine CSS-Animation” von Maxime Rossignol

Der kreativste Ladebildschirm, den wir gesehen haben, bietet diese Animation dem Betrachter viel zum Anschauen, während er darauf wartet, dass der Rest Ihrer digitalen Elemente zum Leben erwacht.

Siehe den Pen
Der leuchtende Loader – Reine CSS-Animation von Maxime Rossignol (@Maxoor)
auf CodePen.

Inhaltsanimationen

Sie suchen eine Möglichkeit, sicherzustellen, dass Ihre App- und Website-Benutzer keine wichtigen Informationen verpassen? Heben Sie sie mit einer dieser CSS-Animationen hervor.

6. “Textanimationsänderung CSS” von Coding Yaar

Fügen Sie Überschriften und anderen wichtigen Texten mit dieser Animation etwas Flair hinzu, einschließlich Details wie Einblendbewegungen, Farbwechsel und mehr.

Sehen Sie den Pen
Textanimationsänderung CSS von Coding Yaar (@codingyaar)
auf CodePen.

7. “CSS Block Revealing Effect” von Abubaker Saeed

Der „enthüllende“ Effekt mit dieser Animation bietet eine weitere interessante Methode, um das Auge auf wichtige Inhaltelemente zu ziehen, die Sie sicherstellen möchten, dass die Besucher nicht verpassen.

Siehe den Pen
CSS-Block-Revealing-Effekt von Abubaker Saeed (@AbubakerSaeed)
auf CodePen.

8. “CSS Reveal Slider” von Adam Kuhn

Mit vielen interessanten Schriftarten, animierten Schaltflächen und einer Umschaltfunktion, die mehr Informationen aufdeckt — dies scheint eine großartige Möglichkeit zu sein, Benutzer in längere Abschnitte mit unverzichtbaren Inhalten wie Häufig gestellte Fragen, Merkmale usw. einzuführen.

Siehe den Pen
CSS Reveal Slider von Adam Kuhn (@cobra_winfrey)
auf CodePen.

9. “Animierte Info-Karte” von Adam Kuhn

Vom selben Schöpfer der vorherigen CSS-Animation bietet diese Option eine weitere kühne und kreative Möglichkeit, Benutzer durch Elemente Ihrer Markengeschichte zu führen.

Siehe den Pen
Animierte Info-Karte von Adam Kuhn (@cobra_winfrey)
auf CodePen.

Button-Animationen

Schaltflächen sind oft das Tor dazu, Nutzer dazu zu bringen, eine Aktion auszuführen oder tiefer in Ihren Inhalt einzutauchen. Inspirieren Sie Interaktion, indem Sie wichtigen Schaltflächen CSS-Animationen hinzufügen.

10. “CSS-Button bei Hover-Slide-Effekt” von RazorX

Hier gibt es viele Möglichkeiten, sonst schlichten Schaltflächen coole Farbfüllanimationen hinzuzufügen.

Sehen Sie den Stift
CSS Button bei Hover Gleiteffekt von RazorX (@RazorXio)
auf CodePen.

11. “Schaltflächenanimationen” von Alex Belmonte

Möchten Sie Ihren Buttons etwas Bewegung verleihen? Fügen Sie mit diesem CSS einen Hover-Effekt und Aktionen wie Hüpfen, Wackeln und mehr zu Ihren Buttons hinzu.

Siehe den Stift
Button-Animationen von Alex Belmonte (@AlexBelmonte)
auf CodePen.

12. “CSS-Schwebereffekt für Schaltflächen” von Julia

Ein minimaler, aber wirkungsvoller Farbhauch verleiht Ihren Schaltflächen etwas Überraschung und Freude.

Siehe den Stift
CSS-Button-Hover-Effekt von Julia (@sfoxy)
auf CodePen.

Hintergrundanimationen

Sie möchten, dass die Hintergründe bestimmter Elemente Ihrer Website oder App gerade interessant genug sind, um die Aufmerksamkeit zu erregen – ohne das zu überschatten, was Sie möchten, dass die Benutzer lesen und tun.

13. “Animierter Hintergrundverlauf” von Mario Klingemann

Wenden Sie diese unendliche Farbschleife auf den Hintergrund wichtiger Abschnitte Ihrer Website oder App an, um eine Note von Bewegung hinzuzufügen.

Siehe den Pen
Animierter Hintergrundverlauf von Mario Klingemann (@quasimondo)
auf CodePen.

14. “CSS-Animationen mit SVGs” von Joyanna

Weiche, farbenfrohe Formen mit zarten Bewegungen bilden einen markanten Hintergrund für Ihre wichtigsten Inhaltsbereiche.

Siehe den Pen
CSS-Animationen mit SVGs von Joyanna (@joyanna)
auf CodePen.

15. “Einfaches Parallax-Scrollen” von Ungmo Lee

Eine Parallax-Scroll-Animation ermöglicht es sowohl dem Vordergrund als auch dem Hintergrund sich zu bewegen, jedoch mit unterschiedlichen Geschwindigkeiten, um die Illusion von Tiefe zu erzeugen. Wie Sie am Beispiel sehen können, kann der Parallax-Effekt überwältigend sein, wenn er nicht mit Zurückhaltung angewendet wird.

Siehe den Pen
Einfaches Parallax-Scrollen von Ungmo Lee (@ungmo2)
auf CodePen.

Überall Animationen

Probieren Sie diese nur-zum-Spaß CSS-Animationen aus, um an verschiedenen Punkten des Benutzererlebnisses ein wenig *Würze* hinzuzufügen.

16. “Vorlage: Logo” von Alex Katz

Fahren Sie mit der Maus über das Logo, um einen leichten Vergrößerungseffekt zu sehen. Diese subtile Bewegung kann bei Logos sowie bei Schaltflächen, Symbolen und anderen Komponenten verwendet werden.

Siehe den Stift
Vorlage: Logo von Alex Katz (@katzkode)
auf CodePen.

17. “Schwebende Animation – CSS” von Mario Duarte

Ein sanfter Schwebeeffekt wie dieser ist ein weiteres überraschendes und unterhaltsames Detail, das den Betrachtern zeigt, dass Sie Ihre digitalen Eigenschaften sowie deren Erfahrung schätzen.

Siehe den Pen
Schwebende Animation – CSS von Mario Duarte (@MarioDesigns)
auf CodePen.

Wie Sie CSS zu Ihrer Webseite hinzufügen

Jede der oben genannten CSS-Animationen wird von HTML, CSS und manchmal anderem Code begleitet, den Sie direkt in Ihr Website-Stylesheet einfügen und bei Bedarf bearbeiten können, um ihn zu Ihrem eigenen zu machen.

Wenn Sie eine maßgeschneiderte Website haben, bei der Sie den Code verwalten und Sie noch nicht mit CSS vertraut sind, denken wir, dass es hilfreich für Sie wäre, die Sprache kennenzulernen, bevor Sie versuchen, die oben genannten Animationen zu implementieren. Lernen Sie die Grundlagen der Erstellung einer Codezeile und tauchen Sie dann in die besten Tutorials ein, um Ihre CSS-Fähigkeiten mit dem DreamHost-Leitfaden zum Erlernen von CSS zu entwickeln.

Sie werden an den obigen Beispielen bemerken, dass es ziemlich viel Code benötigt, um eine Animation zu erstellen. Wenn Sie sich mit CSS wohl fühlen und bereit sind, für Raum und Zeit zu optimieren, erwägen Sie die Verwendung einer CSS-Animationsbibliothek. Jede Bibliothek wird Anweisungen haben, wie Sie sie zu Ihrer Website hinzufügen können, normalerweise durch Hinzufügen einer Quelldatei oder eines CDN zu Ihrem Markup. Einmal installiert, können Sie die spezifischen Animationsshorthand der Bibliothek verwenden, um Ihre Animationen hinzuzufügen.

Wenn Sie eine WordPress-Seite verwenden, bietet die Plattform selbst einen praktischen Leitfaden zum Bearbeiten von CSS entweder mit dem Site Editor (eine Beta-Funktion, die bei einigen Themes verfügbar ist) oder dem Customizer (verfügbar bei den meisten klassischen und einigen Drittanbieter-Themes). In diesen Bearbeitungsbildschirmen fügen Sie den Code aus unseren oben genannten CSS-Animationsbeispielen ein.

Aber was ist, wenn eine Website, die es Ihnen ermöglicht, Ihre Markengeschichte zu erzählen, immer noch nur ein Traum ist? Dann haben wir gute Nachrichten, denn bei DreamHost spezialisieren wir uns darauf, Website-Träume wahr werden zu lassen. Mit individuellem Webdesign, einem benutzerfreundlichen WordPress Website-Builder, Pro-Dienstleistungen von unseren hauseigenen Experten und natürlich robusten Hosting-Optionen — DreamHost wird Ihnen helfen, Ihren Traum online zu bringen.