{"id":52130,"date":"2023-04-24T07:00:33","date_gmt":"2023-04-24T14:00:33","guid":{"rendered":"https:\/\/dhblog.dream.press\/blog\/?p=52130"},"modified":"2025-01-16T11:30:40","modified_gmt":"2025-01-16T19:30:40","slug":"css-animation","status":"publish","type":"post","link":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/","title":{"rendered":"CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen"},"content":{"rendered":"\n<p>Fesselnde Animationen, die Ihren Blick halten, w\u00e4hrend eine Webseite geladen wird. Nahtlose \u00dcberg\u00e4nge, die Sie m\u00fchelos durch die Inhalte einer Webseite f\u00fchren. Unerwartete Farb- und Bewegungsausbr\u00fcche, wenn Sie mit Schaltfl\u00e4chen in einer App interagieren.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<p>In diesem Leitfaden helfen wir Ihnen dabei mit:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Eine Einf\u00fchrung in CSS und CSS-Animationen<\/li>\n\n\n\n<li>Wichtige Gr\u00fcnde, warum Sie CSS-Animationen ausprobieren sollten<\/li>\n\n\n\n<li>Einige Hindernisse bei der Einf\u00fchrung von CSS-Animationen (mit L\u00f6sungen)<\/li>\n\n\n\n<li>17 vorbildliche CSS-Animationen f\u00fcr Ihre App oder Webseite<\/li>\n\n\n\n<li>Wie Sie damit beginnen, CSS auf Ihrer Webseite zu verwenden<\/li>\n\n\n<\/ul>\n\n\n\n<h2 id=\"h-meet-css\" class=\"wp-block-heading\">CSS kennenlernen<\/h2>\n\n\n\n<p>CSS steht f\u00fcr Cascading Style Sheets.<\/p>\n\n\n\n<p>CSS ist eine Programmiersprache, die bestimmt, wie grafische und Inhaltselemente auf einer Website oder Anwendung aussehen und agieren. CSS ist n\u00fctzlich, um Farben und Schriftarten anzupassen, Elemente auf einer Seite zu positionieren und zu verteilen und nat\u00fcrlich, um Animationen zu erstellen. Es gibt \u201ereine\u201c 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.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CSS<\/h3>\n    <p>Cascading Style Sheets (CSS) ist eine wesentliche Programmiersprache, die zur Gestaltung von Webseiten verwendet wird. CSS hilft Ihnen dabei, sch\u00f6ne Seiten zu erstellen, indem es das Aussehen verschiedener Elemente wie Schriftstil, Farbe, Layout und mehr \u00e4ndert.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/web-design\/css\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>CSS kam in den fr\u00fchen 1990er Jahren auf den Markt und hat sich seitdem von CSS1 zu CSS2 bis zu CSS3 entwickelt \u2014 die aktuelle und weit verbreitete Version. In diesem Artikel werden wir der g\u00e4ngigen Praxis folgen, den Begriff \u201eCSS\u201c zu verwenden, wenn wir auf diese neueste Version Bezug nehmen.<\/p>\n\n\n\n<p>HTML ist wie das Fundament und das Ger\u00fcst 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\u00e4t verleihen.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1600\" height=\"1245\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1.jpg\" alt=\"HTML vs CSS\" class=\"wp-image-40236 lazyload\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1.jpg.webp 1600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-300x233.jpg 300w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1024x797.jpg 1024w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-768x598.jpg 768w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/HTML-versus-CSS-1-1536x1195.jpg 1536w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-600x467.jpg.webp 600w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1200x934.jpg.webp 1200w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-730x568.jpg.webp 730w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1460x1136.jpg.webp 1460w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-784x610.jpg.webp 784w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-1568x1220.jpg.webp 1568w, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/smush-webp\/2023\/04\/HTML-versus-CSS-1-877x682.jpg.webp 877w\" data-sizes=\"(max-width: 1600px) 100vw, 1600px\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 1600px; --smush-placeholder-aspect-ratio: 1600\/1245;\" \/><\/figure><\/div>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-css-animation-building-blocks\">CSS Animationsbauk\u00e4sten<\/h3>\n\n\n\n<p>CSS-Animationen verwenden CSS-Code, um verschiedene Eigenschaften und Werte zu verkn\u00fcpfen, die Bildschirmelemente \u201ebewegen\u201c.<\/p>\n\n\n\n<p>CSS-Eigenschaften sind die Teile der Animationen, wie Hintergrund, Randradius, Schriftart, Randabstand, Bewegungsart (wie Drehen oder Verblassen) usw. Werte f\u00fcllen die Details um diese Animationseigenschaften herum aus, indem sie Farbe, Ausrichtung, Gr\u00f6\u00dfe, Dauer, Richtung, Geschwindigkeit usw. definieren.<\/p>\n\n\n\n<p>Lassen Sie uns die Elemente der beliebten <code>@keyframes<\/code> Regel betrachten, die CSS-\u00dcberg\u00e4nge w\u00e4hrend einer Animationssequenz definiert, um ein Beispiel daf\u00fcr zu sehen, wie Eigenschaften und Werte zusammenarbeiten:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Die Eigenschaft <code>animation-name<\/code> gibt den Namen der Animation an.<\/li>\n\n\n\n<li>Die Eigenschaft <code>animation-duration<\/code> beschreibt die L\u00e4nge einer Animation. Werte werden typischerweise in Sekunden angegeben (0s, 4s usw.).<\/li>\n\n\n\n<li>Die Eigenschaft <code>animation-delay<\/code> legt einen verz\u00f6gerten Animationsstart fest. Ihr Wert wird ebenfalls in Sekunden angegeben (-2s, 5s usw.).<\/li>\n\n\n\n<li>Die Eigenschaft <code>animation-iteration-count<\/code> gibt an, wie oft eine Animation ausgef\u00fchrt werden soll. Der Wert repr\u00e4sentiert, wie oft Sie die Animation wiederholen m\u00f6chten; zum Beispiel wird <code>infinite-alternate<\/code> sie unendlich weiterlaufen lassen.<\/li>\n\n\n\n<li>Die Eigenschaft <code>animation-direction<\/code> gibt an, wie eine Animation abgespielt werden soll. Werte umfassen <code>normal<\/code> (vorw\u00e4rts), <code>reverse<\/code>, <code>alternate<\/code> usw.<\/li>\n\n\n\n<li>Die Eigenschaft <code>animation-timing-function<\/code> beschreibt die Geschwindigkeitskurve. Werte umfassen <code>ease-in-out<\/code> f\u00fcr einen sanften Start und Ende, <code>cubic-bezier<\/code> um eine komplex aussehende Kurve zu erstellen usw.<\/li>\n\n\n\n<li>Die Eigenschaft <code>animation-fill-mode<\/code> definiert, wie ein Element aussieht, wenn die Animation nicht abgespielt wird. Werte umfassen <code>forwards<\/code>, um die Werte des letzten Keyframes zu behalten usw.<\/li>\n\n\n<\/ul>\n\n\n\n<p>Jetzt bringen wir alles zusammen! In diesem <a href=\"https:\/\/www.w3schools.com\/css\/css3_animations.asp\" target=\"_blank\" rel=\"noopener\">Beispiel von W3Schools<\/a>, das eine Animation (genannt \u201eBeispiel\u201c) an das <code>&lt;div&gt;<\/code> Element anh\u00e4ngt, k\u00f6nnen Sie sehen, dass das Element 100px Quadrat gro\u00df ist und einen roten Hintergrund hat. Wenn die Animation beginnt, wird sie 4 Sekunden lang fortgesetzt, w\u00e4hrend der Hintergrund von Rot zu Gelb \u00fcbergeht:<\/p>\n\n\n\n<p><code>\/* Der Animationscode *\/<br>\n@keyframes Beispiel {<br>\nvon {Hintergrundfarbe: rot;}<br>\nzu {Hintergrundfarbe: gelb;}<br>\n}<\/code><\/p>\n\n\n\n<p><code>\/* Das Element, auf das die Animation angewendet wird *\/<br>\ndiv {<br>\nwidth: 100px;<br>\nheight: 100px;<br>\nbackground-color: red;<br>\nanimation-name: example;<br>\nanimation-duration: 4s;<br>\n}<\/code><\/p>\n\n\n\n<p>(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 \u2014 lesen Sie weiter f\u00fcr mehr Einblicke und Tipps zur Kompatibilit\u00e4t.)<\/p>\n\n\n\n<h2 id=\"h-3-awesome-reasons-to-implement-css-animations\" class=\"wp-block-heading\">3 gro\u00dfartige Gr\u00fcnde, CSS-Animationen zu implementieren<\/h2>\n\n\n\n<p>Von der Erm\u00f6glichung unvergesslicher Interaktionen bis hin zur Gew\u00e4hrleistung, dass diese mit der Geschwindigkeit moderner Erwartungen stattfinden, haben CSS-Animationen <i>viel<\/i> zur digitalen Erfahrung beizutragen \u2014 sowohl f\u00fcr Sie als auch f\u00fcr Ihre erstaunlichen Kunden oder Besucher.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-create-a-unique-story-and-experience\">Erstellen Sie eine einzigartige Geschichte und Erfahrung<\/h3>\n\n\n\n<p>Die Zeiten, in denen Websites als digitale Plakatw\u00e4nde fungierten, sind vorbei.<\/p>\n\n\n\n<p>In der globalen Wirtschaft sind Websites und Apps Ihre beste M\u00f6glichkeit, <a href=\"https:\/\/www.dreamhost.com\/blog\/how-to-tell-your-brand-story\/\" target=\"_blank\" rel=\"noopener\">Ihre Markengeschichte zu erz\u00e4hlen<\/a>.<\/p>\n\n\n\n<p>Warum sich auf Ihre Geschichte konzentrieren? Weil eine gro\u00dfartige Geschichte Ihre Marke abhebt, die Aufmerksamkeit Ihres idealen Publikums erregt, dauerhafte Verbindungen schafft und \u2014 vielleicht am wichtigsten \u2014 zum <i>Handeln<\/i> inspiriert.<\/p>\n\n\n\n<p>Und Ihre Geschichte basiert teilweise auf den interaktiven Elementen, die Sie in Ihre Benutzererfahrung einbinden.<\/p>\n\n\n\n<p>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.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-revamp-and-maintain-with-fewer-keystrokes\">Neugestalten und warten mit weniger Tastenanschl\u00e4gen<\/h3>\n\n\n\n<p>CSS ist eine organisierte und etwas knappe Programmiersprache. In der Welt der Webentwicklung wird sie als \u201esauber\u201c bezeichnet. Stylesheets k\u00f6nnen normalerweise auf ein Minimum beschr\u00e4nkt werden f\u00fcr einfache App- und Webprojekte.<\/p>\n\n\n\n<p>Das bedeutet, wenn es Zeit ist, Ihr Projekt zu aktualisieren, routinem\u00e4\u00dfige Wartung durchzuf\u00fchren oder einfach Ihr Aussehen und Erlebnis aufzufrischen \u2014 es sollte ziemlich schnell gehen, den Ort f\u00fcr die \u00c4nderung zu finden, Ihr Update zu erstellen und es \u00fcber Ihre gesamte Schnittstelle anzuwenden. Keine Notwendigkeit, viele einzelne HTML-Dateien neu zu codieren und zu implementieren.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-optimize-your-speed\">Optimieren Sie Ihre Geschwindigkeit<\/h3>\n\n\n\n<p>CSS wird im Vergleich zu JavaScript und anderen Programmiersprachen als \u201eleichtgewichtig\u201c angesehen, was es zu einem gro\u00dfartigen Werkzeug macht, um Ihrem Produkt lebhafte, ansprechende Inhalte und Erfahrungen hinzuzuf\u00fcgen \u2013 ohne zus\u00e4tzliches Gewicht, das das Laden verlangsamt.<\/p>\n\n\n\n<p>Zus\u00e4tzlich 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\u00e4ngen Ihrer Website oder App.<\/p>\n\n\n\n<p>Als ein <a href=\"https:\/\/www.searchenginejournal.com\/ranking-factors\/page-speed\/#close\" target=\"_blank\" rel=\"noopener\">wichtiger Rankingfaktor<\/a> bei Google-Suchergebnissen ist Geschwindigkeit etwas, \u00fcber das alle Unternehmen mit einer Online-Pr\u00e4senz nachdenken sollten.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"902\" height=\"492\" data-src=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/CSS-Button-Animation.gif\" alt=\"CSS Button Animation\" class=\"wp-image-40207 lazyload\" src=\"data:image\/svg+xml;base64,PHN2ZyB3aWR0aD0iMSIgaGVpZ2h0PSIxIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjwvc3ZnPg==\" style=\"--smush-placeholder-width: 902px; --smush-placeholder-aspect-ratio: 902\/492;\" \/><\/figure><\/div>\n\n\n<h2 id=\"h-considerations-before-diving-into-css-animations\" class=\"wp-block-heading\">\u00dcberlegungen, bevor man sich in CSS-Animationen st\u00fcrzt<\/h2>\n\n\n\n<p>Sie betreten nun die Verlangsamungszone. Bevor Sie kopf\u00fcber in CSS-Animationen einsteigen, gibt es ein paar kleine Hindernisse, \u00fcber die wir sicherstellen m\u00f6chten, dass Sie informiert und vorbereitet sind.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-compatibility-concerns\">Kompatibilit\u00e4tsbedenken<\/h3>\n\n\n\n<p>Haben Sie schon einmal bemerkt, wie einige Merkmale verschwinden oder st\u00f6ren, wenn Sie mit einer Website auf dem Telefon interagieren \u2014&nbsp;oder Ihren Computer <i>sehr<\/i> verlangsamen?<\/p>\n\n\n\n<p>Verschiedene Ger\u00e4te (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\u00f6nnen, variiert \u2014 und das ist bei CSS-Animationen nicht anders.<\/p>\n\n\n\n<p>Wenn Sie keine benutzerdefinierten Anpassungen vornehmen, kann ein Animationseffekt, der auf Firefox mit Ihrem Laptop unglaublich cool aussieht, f\u00fcr jemanden, der ihn auf seinem Telefon mit Safari betrachtet, seltsam aussehen oder sich seltsam verhalten.<\/p>\n\n\n\n<p>Qualit\u00e4tssicherung (QA) Tests sind entscheidend, um sicherzustellen, dass Ihre CSS-Animationen \u00fcberall kompatibel sind, wo Benutzer mit Ihrer digitalen Pr\u00e4senz interagieren.<\/p>\n\n\n\n<p><b>L\u00f6sung:<\/b> Verwenden Sie einen <a href=\"https:\/\/jigsaw.w3.org\/css-validator\/\" target=\"_blank\" rel=\"noopener\">CSS-Validator<\/a> und <a href=\"https:\/\/wordpress.com\/support\/how-to-find-your-themes-css\/\" target=\"_blank\" rel=\"noopener\">Browser-Entwicklertools<\/a>, um Kompatibilit\u00e4tsprobleme und Fehler bei der Erstellung von CSS zu identifizieren. Diejenigen, die besonders code-versiert sind, k\u00f6nnen eine <a href=\"https:\/\/sass-lang.com\/\" target=\"_blank\" rel=\"noopener\">Sass<\/a> Mixin-Bibliothek wie <a href=\"https:\/\/www.bourbon.io\/\" target=\"_blank\" rel=\"noopener\">Bourbon<\/a> installieren, um Browser-Prefixe (<code>webkit<\/code> f\u00fcr Chrome und Safari, <code>moz<\/code> f\u00fcr Firefox usw.) aktuell und kompatibel zu halten.<\/p>\n\n\n\n<div class=\"article-newsletter article-newsletter--gradient\">\n\n\n<h2>Get Content Delivered Straight to Your Inbox<\/h2><p>Subscribe now to receive all the latest updates, delivered directly to your inbox.<\/p><form class=\"nwsl-form\" id=\"newsletter_block_\" novalidate><div class=\"messages\"><\/div><div class=\"form-group\"><label for=\"input_newsletter_block_\"><input type=\"email\"name=\"email\"id=\"input_newsletter_block_\"placeholder=\"Enter your email address\"novalidatedisabled=\"disabled\"\/><\/label><button type=\"submit\"class=\"btn btn--brand\"disabled=\"disabled\"><span>Sign Me Up!<\/span><svg width=\"21\" height=\"14\" viewBox=\"0 0 21 14\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\">\n<path d=\"M13.8523 0.42524L12.9323 1.34521C12.7095 1.56801 12.7132 1.9304 12.9404 2.14865L16.7241 5.7823H0.5625C0.251859 5.7823 0 6.03416 0 6.3448V7.6573C0 7.96794 0.251859 8.2198 0.5625 8.2198H16.7241L12.9405 11.8535C12.7132 12.0717 12.7095 12.4341 12.9323 12.6569L13.8523 13.5769C14.072 13.7965 14.4281 13.7965 14.6478 13.5769L20.8259 7.39879C21.0456 7.17913 21.0456 6.82298 20.8259 6.60327L14.6477 0.42524C14.4281 0.205584 14.0719 0.205584 13.8523 0.42524Z\" fill=\"white\"\/>\n<\/svg>\n<\/button><\/div><\/form><\/div>\n\n\n<h2 id=\"h-17-dynamic-css-animations-to-try-today\" class=\"wp-block-heading\">17 dynamische CSS-Animationen, die Sie heute ausprobieren sollten<\/h2>\n\n\n\n<p>Bereit, CSS-Animationen zu verwenden, um erstaunliche digitale Erlebnisse zu schaffen, die Benutzer anziehen und halten? Bereit, die so wichtige Seitengeschwindigkeit zu erh\u00f6hen und Wartungs- und Neugestaltungszeit zu reduzieren?<\/p>\n\n\n\n<p>Dann sind Sie hier genau richtig! Wir haben einige gro\u00dfartige CSS-Animationen f\u00fcr Ihr Sehvergn\u00fcgen zusammengestellt. Klicken Sie auf eine Option, die Ihnen gef\u00e4llt, um den ben\u00f6tigten Code zu erhalten, und dann k\u00f6nnen Sie ihn Ihrem Website-Stylesheet hinzuf\u00fcgen. (Zur Information, \u00f6ffentliche Pens auf CodePen sind laut ihren <a href=\"https:\/\/blog.codepen.io\/documentation\/licensing\/\" target=\"_blank\" rel=\"noopener\">Lizenzdetails<\/a> kostenlos von jedermann f\u00fcr jeden Zweck nutzbar.)<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-loading-animations\">Ladeanimationen<\/h3>\n\n\n\n<p>Ladeanimationen sind vielleicht nicht die spannendste Klasse von CSS-Animationen, aber sie sind entscheidend f\u00fcr 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\u00dfartiges kommt.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><b>CSS Loader mit Punkten<\/b><\/a><b>\u201d von Aliaksei Peterson<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Bis jetzt ist eine pulsierende Linie von Punkten universell f\u00fcr \u201eNur einen Moment!\u201c Wie der Code ist diese Option klar und pr\u00e4gnant, was sie zu einer guten Wahl f\u00fcr eine Online-Pr\u00e4senz mit einem ernsten Ton oder minimalistischem Stil macht.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/petersonby\/pen\/gzxpdj\" target=\"_blank\" rel=\"noopener\"><br>CSS Loader mit Punkten<\/a> von Aliaksei Peterson (<a href=\"https:\/\/codepen.io\/petersonby\" target=\"_blank\" rel=\"noopener\">@petersonby<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><b>Einfache HTML- &amp; SVG-Ladespinner<\/b><\/a><b>\u201d von Stephen Delaney&nbsp;<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Ein weiteres klassisches Ladesymbol \u2014 der Spinner. Diese Animation bietet die M\u00f6glichkeit, eine SVG zu integrieren, was f\u00fcr Scalable Vector Graphic steht, die ohne Qualit\u00e4tsverlust skaliert werden kann.<\/p>\n\n\n\n<p>Siehe den Stift <a href=\"https:\/\/codepen.io\/sdelaney\/pen\/wWdxPe\" target=\"_blank\" rel=\"noopener\"><br>Einfache HTML &amp; SVG Ladespinner<\/a> von Stephen Delaney (<a href=\"https:\/\/codepen.io\/sdelaney\" target=\"_blank\" rel=\"noopener\">@sdelaney<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"3\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><b>Ladeanimation<\/b><\/a><b>\u201d von Mohamed Yousef<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Dieses sich drehende Set aus tr\u00e4nenf\u00f6rmigen Formen bietet eine wundersch\u00f6n einfache Animation, in der man sich verlieren kann, und macht eine kleine zus\u00e4tzliche Ladezeit viel weniger \u00e4rgerlich. Was k\u00f6nnten Sie mehr verlangen?<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/Freeps2\/pen\/vYzVKNw\" target=\"_blank\" rel=\"noopener\"><br>Ladeanimation<\/a> von Mohamed Yousef (<a href=\"https:\/\/codepen.io\/Freeps2\" target=\"_blank\" rel=\"noopener\">@Freeps2<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"4\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><b>Only Css Animation #02<\/b><\/a><b>\u201d von Hisami Kurita<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Eine beeindruckende, reine CSS-Animation, die uns an den Besuch der Website eines gehobenen Restaurants oder Hotels erinnert. \u00c4ndern Sie die Farbe und den Namen, um sie an Ihre eigene Marke anzupassen.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/hisamikurita\/pen\/OJLrjpB\" target=\"_blank\" rel=\"noopener\"><br>Nur CSS-Animation #02<\/a> von Hisami Kurita (<a href=\"https:\/\/codepen.io\/hisamikurita\" target=\"_blank\" rel=\"noopener\">@hisamikurita<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"5\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><b>Der Leuchtende Lader &#8211; Reine CSS-Animation<\/b><\/a><b>\u201d von Maxime Rossignol<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Der kreativste Ladebildschirm, den wir gesehen haben, bietet diese Animation dem Betrachter viel zum Anschauen, w\u00e4hrend er darauf wartet, dass der Rest Ihrer digitalen Elemente zum Leben erwacht.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/Maxoor\/pen\/JZZvXJ\" target=\"_blank\" rel=\"noopener\"><br>Der leuchtende Loader &#8211; Reine CSS-Animation<\/a> von Maxime Rossignol (<a href=\"https:\/\/codepen.io\/Maxoor\" target=\"_blank\" rel=\"noopener\">@Maxoor<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-content-animations\">Inhaltsanimationen<\/h3>\n\n\n\n<p>Sie suchen eine M\u00f6glichkeit, sicherzustellen, dass Ihre App- und Website-Benutzer keine wichtigen Informationen verpassen? Heben Sie sie mit einer dieser CSS-Animationen hervor.<\/p>\n\n\n\n<ol start=\"6\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><b>Textanimations\u00e4nderung CSS<\/b><\/a><b>\u201d von Coding Yaar<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>F\u00fcgen Sie \u00dcberschriften und anderen wichtigen Texten mit dieser Animation etwas Flair hinzu, einschlie\u00dflich Details wie Einblendbewegungen, Farbwechsel und mehr.<\/p>\n\n\n\n<p>Sehen Sie den Pen <a href=\"https:\/\/codepen.io\/codingyaar\/pen\/LYJQaBe\" target=\"_blank\" rel=\"noopener\"><br>Textanimations\u00e4nderung CSS<\/a> von Coding Yaar (<a href=\"https:\/\/codepen.io\/codingyaar\" target=\"_blank\" rel=\"noopener\">@codingyaar<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"7\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><b>CSS Block Revealing Effect<\/b><\/a><b>\u201d von Abubaker Saeed<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Der \u201eenth\u00fcllende\u201c Effekt mit dieser Animation bietet eine weitere interessante Methode, um das Auge auf wichtige Inhaltelemente zu ziehen, die Sie sicherstellen m\u00f6chten, dass die Besucher nicht verpassen.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/AbubakerSaeed\/pen\/abzWqPb\" target=\"_blank\" rel=\"noopener\"><br>CSS-Block-Revealing-Effekt<\/a> von Abubaker Saeed (<a href=\"https:\/\/codepen.io\/AbubakerSaeed\" target=\"_blank\" rel=\"noopener\">@AbubakerSaeed<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"8\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><b>CSS Reveal Slider<\/b><\/a><b>\u201d von Adam Kuhn<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Mit vielen interessanten Schriftarten, animierten Schaltfl\u00e4chen und einer Umschaltfunktion, die mehr Informationen aufdeckt \u2014 dies scheint eine gro\u00dfartige M\u00f6glichkeit zu sein, Benutzer in l\u00e4ngere Abschnitte mit unverzichtbaren Inhalten wie H\u00e4ufig gestellte Fragen, Merkmale usw. einzuf\u00fchren.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/eojKJv\" target=\"_blank\" rel=\"noopener\"><br>CSS Reveal Slider<\/a> von Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"9\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><b>Animierte Info-Karte<\/b><\/a><b>\u201d von Adam Kuhn<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Vom selben Sch\u00f6pfer der vorherigen CSS-Animation bietet diese Option eine weitere k\u00fchne und kreative M\u00f6glichkeit, Benutzer durch Elemente Ihrer Markengeschichte zu f\u00fchren.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/cobra_winfrey\/pen\/EJmREe\" target=\"_blank\" rel=\"noopener\"><br>Animierte Info-Karte<\/a> von Adam Kuhn (<a href=\"https:\/\/codepen.io\/cobra_winfrey\" target=\"_blank\" rel=\"noopener\">@cobra_winfrey<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-button-animations\">Button-Animationen<\/h3>\n\n\n\n<p>Schaltfl\u00e4chen sind oft das Tor dazu, Nutzer dazu zu bringen, eine Aktion auszuf\u00fchren oder tiefer in Ihren Inhalt einzutauchen. Inspirieren Sie Interaktion, indem Sie wichtigen Schaltfl\u00e4chen CSS-Animationen hinzuf\u00fcgen.<\/p>\n\n\n\n<ol start=\"10\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/RazorXio\/details\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><b>CSS-Button bei Hover-Slide-Effekt<\/b><\/a><b>\u201d von RazorX<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Hier gibt es viele M\u00f6glichkeiten, sonst schlichten Schaltfl\u00e4chen coole Farbf\u00fcllanimationen hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p>Sehen Sie den Stift <a href=\"https:\/\/codepen.io\/RazorXio\/pen\/gMaoOW\" target=\"_blank\" rel=\"noopener\"><br>CSS Button bei Hover Gleiteffekt<\/a> von RazorX (<a href=\"https:\/\/codepen.io\/RazorXio\" target=\"_blank\" rel=\"noopener\">@RazorXio<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"11\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><b>Schaltfl\u00e4chenanimationen<\/b><\/a><b>\u201d von Alex Belmonte<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>M\u00f6chten Sie Ihren Buttons etwas Bewegung verleihen? F\u00fcgen Sie mit diesem CSS einen Hover-Effekt und Aktionen wie H\u00fcpfen, Wackeln und mehr zu Ihren Buttons hinzu.<\/p>\n\n\n\n<p>Siehe den Stift <a href=\"https:\/\/codepen.io\/AlexBelmonte\/pen\/yWzKYR\" target=\"_blank\" rel=\"noopener\"><br>Button-Animationen<\/a> von Alex Belmonte (<a href=\"https:\/\/codepen.io\/AlexBelmonte\" target=\"_blank\" rel=\"noopener\">@AlexBelmonte<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"12\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><b>CSS-Schwebereffekt f\u00fcr Schaltfl\u00e4chen<\/b><\/a><b>\u201d von Julia<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Ein minimaler, aber wirkungsvoller Farbhauch verleiht Ihren Schaltfl\u00e4chen etwas \u00dcberraschung und Freude.<\/p>\n\n\n\n<p>Siehe den Stift <a href=\"https:\/\/codepen.io\/sfoxy\/pen\/XpOoJe\" target=\"_blank\" rel=\"noopener\"><br>CSS-Button-Hover-Effekt<\/a> von Julia (<a href=\"https:\/\/codepen.io\/sfoxy\" target=\"_blank\" rel=\"noopener\">@sfoxy<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-background-animations\">Hintergrundanimationen<\/h3>\n\n\n\n<p>Sie m\u00f6chten, dass die Hintergr\u00fcnde bestimmter Elemente Ihrer Website oder App <i>gerade<\/i> interessant genug sind, um die Aufmerksamkeit zu erregen \u2013 ohne das zu \u00fcberschatten, was Sie m\u00f6chten, dass die Benutzer lesen und tun.<\/p>\n\n\n\n<ol start=\"13\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><b>Animierter Hintergrundverlauf<\/b><\/a><b>\u201d von Mario Klingemann<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Wenden Sie diese unendliche Farbschleife auf den Hintergrund wichtiger Abschnitte Ihrer Website oder App an, um eine Note von Bewegung hinzuzuf\u00fcgen.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/quasimondo\/pen\/AZedgK\" target=\"_blank\" rel=\"noopener\"><br>Animierter Hintergrundverlauf<\/a> von Mario Klingemann (<a href=\"https:\/\/codepen.io\/quasimondo\" target=\"_blank\" rel=\"noopener\">@quasimondo<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"14\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><b>CSS-Animationen mit SVGs<\/b><\/a><b>\u201d von Joyanna<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Weiche, farbenfrohe Formen mit zarten Bewegungen bilden einen markanten Hintergrund f\u00fcr Ihre wichtigsten Inhaltsbereiche.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/joyanna\/pen\/NWGYLNW\" target=\"_blank\" rel=\"noopener\"><br>CSS-Animationen mit SVGs<\/a> von Joyanna (<a href=\"https:\/\/codepen.io\/joyanna\" target=\"_blank\" rel=\"noopener\">@joyanna<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"15\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><b>Einfaches Parallax-Scrollen<\/b><\/a><b>\u201d von Ungmo Lee<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Eine Parallax-Scroll-Animation erm\u00f6glicht 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\u00f6nnen, kann der Parallax-Effekt \u00fcberw\u00e4ltigend sein, wenn er nicht mit Zur\u00fcckhaltung angewendet wird.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/ungmo2\/pen\/vXZMEj\" target=\"_blank\" rel=\"noopener\"><br>Einfaches Parallax-Scrollen<\/a> von Ungmo Lee (<a href=\"https:\/\/codepen.io\/ungmo2\" target=\"_blank\" rel=\"noopener\">@ungmo2<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"h-anywhere-animations\">\u00dcberall Animationen<\/h3>\n\n\n\n<p>Probieren Sie diese nur-zum-Spa\u00df CSS-Animationen aus, um an verschiedenen Punkten des Benutzererlebnisses ein wenig *W\u00fcrze* hinzuzuf\u00fcgen.<\/p>\n\n\n\n<ol start=\"16\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><b>Vorlage: Logo<\/b><\/a><b>\u201d von Alex Katz<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Fahren Sie mit der Maus \u00fcber das Logo, um einen leichten Vergr\u00f6\u00dferungseffekt zu sehen. Diese subtile Bewegung kann bei Logos sowie bei Schaltfl\u00e4chen, Symbolen und anderen Komponenten verwendet werden.<\/p>\n\n\n\n<p>Siehe den Stift <a href=\"https:\/\/codepen.io\/katzkode\/pen\/WRjwZR\" target=\"_blank\" rel=\"noopener\"><br>Vorlage: Logo<\/a> von Alex Katz (<a href=\"https:\/\/codepen.io\/katzkode\" target=\"_blank\" rel=\"noopener\">@katzkode<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<ol start=\"17\" class=\"wp-block-list\">\n<li><b> \u201c<\/b><a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><b>Schwebende Animation &#8211; CSS<\/b><\/a><b>\u201d von Mario Duarte<\/b><\/li>\n\n\n<\/ol>\n\n\n\n<p>Ein sanfter Schwebeeffekt wie dieser ist ein weiteres \u00fcberraschendes und unterhaltsames Detail, das den Betrachtern zeigt, dass Sie Ihre digitalen Eigenschaften sowie deren Erfahrung sch\u00e4tzen.<\/p>\n\n\n\n<p>Siehe den Pen <a href=\"https:\/\/codepen.io\/MarioDesigns\/pen\/woJgeo\" target=\"_blank\" rel=\"noopener\"><br>Schwebende Animation &#8211; CSS<\/a> von Mario Duarte (<a href=\"https:\/\/codepen.io\/MarioDesigns\" target=\"_blank\" rel=\"noopener\">@MarioDesigns<\/a>)<br>auf <a href=\"https:\/\/codepen.io\" target=\"_blank\" rel=\"noopener\">CodePen<\/a>.<\/p>\n\n\n\n<p><script async=\"\" src=\"https:\/\/cpwebassets.codepen.io\/assets\/embed\/ei.js\"><\/script><\/p>\n\n\n\n<h2 id=\"h-how-to-add-css-to-your-website\" class=\"wp-block-heading\">Wie Sie CSS zu Ihrer Webseite hinzuf\u00fcgen<\/h2>\n\n\n\n<p>Jede der oben genannten CSS-Animationen wird von HTML, CSS und manchmal anderem Code begleitet, den Sie direkt in Ihr Website-Stylesheet einf\u00fcgen und bei Bedarf bearbeiten k\u00f6nnen, um ihn zu Ihrem eigenen zu machen.<\/p>\n\n\n\n<p>Wenn Sie eine ma\u00dfgeschneiderte Website haben, bei der Sie den Code verwalten und Sie noch nicht mit CSS vertraut sind, denken wir, dass es hilfreich f\u00fcr Sie w\u00e4re, 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\u00e4higkeiten mit dem <a href=\"https:\/\/www.dreamhost.com\/de\/\" target=\"_blank\" rel=\"noopener\">DreamHost<\/a>-Leitfaden zum <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/css-lernen\/\" target=\"_blank\" rel=\"noopener\">Erlernen von CSS<\/a> zu entwickeln.<\/p>\n\n\n\n<p>Sie werden an den obigen Beispielen bemerken, dass es ziemlich viel Code ben\u00f6tigt, um eine Animation zu erstellen. Wenn Sie sich mit CSS wohl f\u00fchlen und bereit sind, f\u00fcr Raum und Zeit zu optimieren, erw\u00e4gen Sie die Verwendung einer <a href=\"https:\/\/coderpad.io\/blog\/development\/top-10-css-animation-libraries\/\" target=\"_blank\" rel=\"noopener\">CSS-Animationsbibliothek<\/a>. Jede Bibliothek wird Anweisungen haben, wie Sie sie zu Ihrer Website hinzuf\u00fcgen k\u00f6nnen, normalerweise durch Hinzuf\u00fcgen einer Quelldatei oder eines <a href=\"https:\/\/www.dreamhost.com\/blog\/de\/leitfaden-zur-verwendung-eines-cdn-mit-wp\/\" target=\"_blank\" rel=\"noopener\">CDN<\/a> zu Ihrem Markup. Einmal installiert, k\u00f6nnen Sie die spezifischen Animationsshorthand der Bibliothek verwenden, um Ihre Animationen hinzuzuf\u00fcgen.<\/p>\n\n\n\n\n\n<div class=\"glossary-term\">\n\t<a\n\t\tclass=\"glossary-term__above-title\"\n\t\thref=\"\"\n\t\ttarget=\"_blank\"\n\t\trel=\"noopener noreferrer\"\n\t>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 640 512\"><path d=\"M320 32c-8.1 0-16.1 1.4-23.7 4.1L15.8 137.4C6.3 140.9 0 149.9 0 160s6.3 19.1 15.8 22.6l57.9 20.9C57.3 229.3 48 259.8 48 291.9v28.1c0 28.4-10.8 57.7-22.3 80.8c-6.5 13-13.9 25.8-22.5 37.6C0 442.7-.9 448.3 .9 453.4s6 8.9 11.2 10.2l64 16c4.2 1.1 8.7 .3 12.4-2s6.3-6.1 7.1-10.4c8.6-42.8 4.3-81.2-2.1-108.7C90.3 344.3 86 329.8 80 316.5V291.9c0-30.2 10.2-58.7 27.9-81.5c12.9-15.5 29.6-28 49.2-35.7l157-61.7c8.2-3.2 17.5 .8 20.7 9s-.8 17.5-9 20.7l-157 61.7c-12.4 4.9-23.3 12.4-32.2 21.6l159.6 57.6c7.6 2.7 15.6 4.1 23.7 4.1s16.1-1.4 23.7-4.1L624.2 182.6c9.5-3.4 15.8-12.5 15.8-22.6s-6.3-19.1-15.8-22.6L343.7 36.1C336.1 33.4 328.1 32 320 32zM128 408c0 35.3 86 72 192 72s192-36.7 192-72L496.7 262.6 354.5 314c-11.1 4-22.8 6-34.5 6s-23.5-2-34.5-6L143.3 262.6 128 408z\"\/><\/svg>\n\t\t<span><\/span>\n\t\t<svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" viewBox=\"0 0 384 512\"><path d=\"M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z\"\/><\/svg>\n\t<\/a>\n    <h3>CDN<\/h3>\n    <p>CDN ist die Abk\u00fcrzung f\u00fcr u201cContent Delivery Networku201d. Es bezieht sich auf ein geografisch verteiltes Netzwerk von Webservern (und deren Datenzentren). Die Einheiten, die ein CDN bilden, arbeiten zusammen, um eine schnelle Inhaltsauslieferung \u00fcber das Internet zu gew\u00e4hrleisten.<\/p>\n            <a\n            href=\"https:\/\/www.dreamhost.com\/glossary\/hosting\/cdn\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr lesen                    <\/a>\n\n<\/div>\n\n\n\n<p>Wenn Sie eine WordPress-Seite verwenden, bietet die Plattform selbst einen praktischen Leitfaden zum <a href=\"https:\/\/wordpress.com\/support\/editing-css\/\" target=\"_blank\" rel=\"noopener\">Bearbeiten von CSS<\/a> entweder mit dem Site Editor (eine Beta-Funktion, die bei einigen Themes verf\u00fcgbar ist) oder dem Customizer (verf\u00fcgbar bei den meisten klassischen und einigen Drittanbieter-Themes). In diesen Bearbeitungsbildschirmen f\u00fcgen Sie den Code aus unseren oben genannten CSS-Animationsbeispielen ein.<\/p>\n\n\n\n<p>Aber was ist, wenn eine Website, die es Ihnen erm\u00f6glicht, Ihre Markengeschichte zu erz\u00e4hlen, immer noch nur ein Traum ist? Dann haben wir gute Nachrichten, denn bei DreamHost <i>spezialisieren<\/i> wir uns darauf, Website-Tr\u00e4ume wahr werden zu lassen. Mit <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/design\/individuelles-webdesign\/\" target=\"_blank\" rel=\"noopener\">individuellem Webdesign<\/a>, einem benutzerfreundlichen WordPress <a href=\"https:\/\/www.dreamhost.com\/de\/ki-website-builder\/\" target=\"_blank\" rel=\"noopener\">Website-Builder<\/a>, <a href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/\" target=\"_blank\" rel=\"noopener\">Pro-Dienstleistungen<\/a> von unseren hauseigenen Experten und nat\u00fcrlich robusten <a href=\"https:\/\/www.dreamhost.com\/de\/hosting\/\" target=\"_blank\" rel=\"noopener\">Hosting<\/a>-Optionen \u2014 <b>DreamHost wird Ihnen helfen, Ihren Traum online zu bringen.<\/b><\/p>\n\n\n\n\n<div\n\tclass=\"article-cta-shared article-cta-small\"\n>\n    <div class=\"tr-img-wrap-outer jsLoading\"><img decoding=\"async\" class=\"js-img-lazy \" src=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/lazy-loading-transparent.webp\" data-srcset=\"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder.webp 1x, https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/themes\/blog2018\/assets\/img\/article-small-ad-cta-placeholder-x2.webp 2x\"  alt=\"Ad background image\" \/><\/div>\n\n\n\n\n  <div class=\"content-btm\">\n    <h2\n      class=\"h2--md\"\n    >\n      Mehr Besucher gewinnen, Ihr Gesch\u00e4ft ausbauen\n    <\/h2>\n    <p\n      class=\"p--md\"\n    >\n      Unsere Marketingexperten werden Ihnen helfen, mehr Verkehr zu verdienen und mehr Website-Besucher zu konvertieren, sodass Sie sich auf die F\u00fchrung Ihres Unternehmens konzentrieren k\u00f6nnen.\n    <\/p>\n\n            <a\n            href=\"https:\/\/www.dreamhost.com\/de\/professionelle-dienste\/marketing\/\"\n                        class=\"btn btn--white-outline btn--sm btn--round\"\n                                    target=\"_blank\"\n            rel=\"noopener noreferrer\"\n            >\n                            Mehr erfahren                    <\/a>\n\n  <\/div>\n<\/div>\n\n","protected":false},"excerpt":{"rendered":"<p>Fesselnde Animationen, die Ihren Blick halten, w\u00e4hrend eine Webseite l\u00e4dt. Nahtlose \u00dcberg\u00e4nge, die Sie m\u00fchelos durch den Inhalt einer Webseite f\u00fchren. Unerwartete Farb- und Bewegungsausbr\u00fcche, wenn Sie mit Schaltfl\u00e4chen in einer App interagieren. Obwohl subtil, beeinflussen diese Elemente stark Ihre Wahrnehmung einer Marke und Ihr gesamtes digitales Erlebnis. Also, was bringt diese ansprechenden Details [\u2026]<\/p>\n","protected":false},"author":1058,"featured_media":40203,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_yoast_wpseo_metadesc":"","toc_headlines":"[[\"h-meet-css\",\"CSS kennenlernen\"],[\"h-3-awesome-reasons-to-implement-css-animations\",\"3 gro\u00dfartige Gr\u00fcnde, CSS-Animationen zu implementieren\"],[\"h-considerations-before-diving-into-css-animations\",\"\u00dcberlegungen, bevor man sich in CSS-Animationen st\u00fcrzt\"],[\"h-17-dynamic-css-animations-to-try-today\",\"17 dynamische CSS-Animationen, die Sie heute ausprobieren sollten\"],[\"h-how-to-add-css-to-your-website\",\"Wie Sie CSS zu Ihrer Webseite hinzuf\u00fcgen\"]]","hide_toc":false,"footnotes":""},"categories":[14495,14509],"tags":[],"class_list":["post-52130","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials-de","category-webdesign-de"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.3 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen - DreamHost Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen\" \/>\n<meta property=\"og:description\" content=\"Fesselnde Animationen, die Ihren Blick halten, w\u00e4hrend eine Webseite l\u00e4dt. Nahtlose \u00dcberg\u00e4nge, die Sie m\u00fchelos durch den Inhalt einer Webseite f\u00fchren. Unerwartete Farb- und Bewegungsausbr\u00fcche, wenn Sie mit Schaltfl\u00e4chen in einer App interagieren. Obwohl subtil, beeinflussen diese Elemente stark Ihre Wahrnehmung einer Marke und Ihr gesamtes digitales Erlebnis. Also, was bringt diese ansprechenden Details [\u2026]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/\" \/>\n<meta property=\"og:site_name\" content=\"DreamHost Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/DreamHost\/\" \/>\n<meta property=\"article:published_time\" content=\"2023-04-24T14:00:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-01-16T19:30:40+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1460\" \/>\n\t<meta property=\"og:image:height\" content=\"1095\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Ian Hernandez\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:site\" content=\"@dreamhost\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Ian Hernandez\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"13 minutes\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen - DreamHost Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/","og_locale":"en_US","og_type":"article","og_title":"CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen","og_description":"Fesselnde Animationen, die Ihren Blick halten, w\u00e4hrend eine Webseite l\u00e4dt. Nahtlose \u00dcberg\u00e4nge, die Sie m\u00fchelos durch den Inhalt einer Webseite f\u00fchren. Unerwartete Farb- und Bewegungsausbr\u00fcche, wenn Sie mit Schaltfl\u00e4chen in einer App interagieren. Obwohl subtil, beeinflussen diese Elemente stark Ihre Wahrnehmung einer Marke und Ihr gesamtes digitales Erlebnis. Also, was bringt diese ansprechenden Details [\u2026]","og_url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/","og_site_name":"DreamHost Blog","article_publisher":"https:\/\/www.facebook.com\/DreamHost\/","article_published_time":"2023-04-24T14:00:33+00:00","article_modified_time":"2025-01-16T19:30:40+00:00","og_image":[{"width":1460,"height":1095,"url":"https:\/\/www.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","type":"image\/jpeg"}],"author":"Ian Hernandez","twitter_card":"summary_large_image","twitter_creator":"@dreamhost","twitter_site":"@dreamhost","twitter_misc":{"Written by":"Ian Hernandez","Est. reading time":"13 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/#article","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/"},"author":{"name":"Ian Hernandez","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96"},"headline":"CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-01-16T19:30:40+00:00","mainEntityOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/"},"wordCount":2542,"publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","articleSection":["Tutorials","Webdesign"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/","name":"CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen - DreamHost Blog","isPartOf":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/#primaryimage"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/#primaryimage"},"thumbnailUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","datePublished":"2023-04-24T14:00:33+00:00","dateModified":"2025-01-16T19:30:40+00:00","breadcrumb":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/#primaryimage","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2023\/04\/Enhance-Your-Website-With-CSS-Animations-Hero-Image.jpg","width":1460,"height":1095,"caption":"Enhance Your Website With CSS Animations Hero Image"},{"@type":"BreadcrumbList","@id":"https:\/\/www-dev.dreamhost.com\/blog\/de\/css-animation\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/dhblog.dream.press\/blog\/"},{"@type":"ListItem","position":2,"name":"CSS-Animationen: Verbessern Sie Ihre Website mit diesen 17 Optionen"}]},{"@type":"WebSite","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#website","url":"https:\/\/www-dev.dreamhost.com\/blog\/","name":"DreamHost Blog","description":"","publisher":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www-dev.dreamhost.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#organization","name":"DreamHost","url":"https:\/\/www-dev.dreamhost.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","contentUrl":"https:\/\/dhblog.dream.press\/blog\/wp-content\/uploads\/2019\/01\/dh_logo-blue-2.png","width":1200,"height":168,"caption":"DreamHost"},"image":{"@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/DreamHost\/","https:\/\/x.com\/dreamhost","https:\/\/www.instagram.com\/dreamhost\/","https:\/\/www.linkedin.com\/company\/dreamhost\/","https:\/\/www.youtube.com\/user\/dreamhostusa"]},{"@type":"Person","@id":"https:\/\/www-dev.dreamhost.com\/blog\/#\/schema\/person\/220faf2464d5ae08e41cf5f3b28fdc96","name":"Ian Hernandez","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","url":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","contentUrl":"https:\/\/www-dev.dreamhost.com\/blog\/wp-content\/uploads\/2022\/04\/ian-hernandez-dreamhost-150x150.png","caption":"Ian Hernandez"},"description":"Ian is a Product Designer based in Los Angeles, California. He is responsible for driving brand and product design at DreamHost, developing and maintaining our internal design system, and writing frontend code when he can. In his free time, he enjoys walking his dog, learning history, and discovering new music online and irl. Connect with him on LinkedIn: https:\/\/www.linkedin.com\/in\/ianhernandez23\/","url":"https:\/\/www-dev.dreamhost.com\/blog\/author\/ianh\/"}]}},"lang":"de","translations":{"de":52130,"es":40223,"en":40202,"pt":52127,"uk":52140,"pl":54840,"ru":54925,"it":68519,"fr":70615,"nl":70651},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52130","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/users\/1058"}],"replies":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/comments?post=52130"}],"version-history":[{"count":4,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52130\/revisions"}],"predecessor-version":[{"id":62794,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/posts\/52130\/revisions\/62794"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media\/40203"}],"wp:attachment":[{"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/media?parent=52130"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/categories?post=52130"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-dev.dreamhost.com\/blog\/wp-json\/wp\/v2\/tags?post=52130"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}