{"id":253602,"date":"2023-08-13T09:06:00","date_gmt":"2023-08-13T06:06:00","guid":{"rendered":"https:\/\/inform.click\/erwecken-sie-ihre-webseiten-mit-css-animationen-und-uebergaengen-zum-leben\/"},"modified":"2023-08-13T09:10:00","modified_gmt":"2023-08-13T06:10:00","slug":"erwecken-sie-ihre-webseiten-mit-css-animationen-und-uebergaengen-zum-leben","status":"publish","type":"post","link":"https:\/\/inform.click\/de\/erwecken-sie-ihre-webseiten-mit-css-animationen-und-uebergaengen-zum-leben\/","title":{"rendered":"Erwecken Sie Ihre Webseiten mit CSS-Animationen und -\u00dcberg\u00e4ngen zum Leben"},"content":{"rendered":"

\n Website-Designs entwickeln sich st\u00e4ndig weiter. Von ansprechendem Design, sch\u00f6ner Typografie, perfekten Farbcodierungsschemata und Illustrationen \u2013 die Website-Ersteller entwickeln jeden Tag neue Ideen und Designs.\n<\/p>\n

\n Heutzutage haben Benutzer hohe Erwartungen an die Benutzerschnittstellen aufgrund solch hochwertiger Inhalte, die \u00fcber das Internet verf\u00fcgbar sind. Mit der Entwicklung der Website-Schnittstellen entwickelt sich auch die Technologie dahinter. Eine Hauptkomponente, die f\u00fcr die Verbesserung der Website-Oberfl\u00e4che verantwortlich ist, ist CSS<\/strong>.\n<\/p>\n

\n CSS oder Cascading Style Sheets sind daf\u00fcr verantwortlich, Websites sehr interaktiv zu machen, indem sie ihren Stil, ihr Layout und ihre Designs definieren. CSS3, der neueste Standard f\u00fcr CSS, hat das Konzept von Animationen<\/strong> und Transformationen<\/strong> eingef\u00fchrt, die das Benutzererlebnis verbessern, indem sie der Benutzeroberfl\u00e4che zus\u00e4tzliche Tiefe verleihen. Mit CSS-Animationen und -\u00dcberg\u00e4ngen k\u00f6nnen Sie Geschichten erz\u00e4hlen, aufwendige Effekte erzeugen und die Benutzerinteraktion mit Ihrer Website sehr effektiv und sinnvoll gestalten.\n<\/p>\n

\n Eine Animation ist nur eine Bewegungssimulation, die dadurch entsteht, dass eine Reihe von Objekten wie Bilder nacheinander angezeigt werden. Der \u00dcbergang hingegen ist im Grunde ein Prozess, bei dem ein Objekt von einem Zustand in einen anderen wechselt. Aber wenn wir \u00fcber Webanimationen sprechen, gibt es im Wesentlichen drei Arten \u2013 CSS-Animationen<\/strong> oder Keyframe-Animationen, CSS-\u00dcberg\u00e4nge<\/strong> und JavaScript-Animationen<\/strong>.\n<\/p>\n

\n CSS-Animationen\n<\/p>\n

\n Um Animationen in CSS zu erstellen, m\u00fcssen wir die CSS-Eigenschaften eines Elements wie eines Bildes oder Textes f\u00fcr einen bestimmten Zeitraum \u00e4ndern. Wir k\u00f6nnen die Eigenschaften von Elementen beliebig oft \u00e4ndern und auch die Dauer der Animation festlegen.\n<\/p>\n

\n Festlegen von @keyframes
\n<\/h5>\n

\n CSS-Animationen werden bitweise mit Keyframes definiert. Diese Keyframes sind die Zwischenpunkte der Animation. Alle CSS-Animationen werden unter der @keyframes-Regel angegeben. Diese Keyframes geben an, was mit dem Element zu einem bestimmten Zeitpunkt passiert, d. h.\n<\/p>\n

    \n
  • welche Eigenschaften sich \u00e4ndern\n <\/li>\n
  • wenn das Element animiert wird\n <\/li>\n
  • wie das Element animiert wird\n <\/li>\n<\/ul>\n

    \n Sie k\u00f6nnen Ihren eigenen Keyframe definieren als:\n<\/p>\n

    @keyframes animation_name\n{\nfrom{ property: value; }\nto{ property: value; }\n}<\/code><\/pre>\n
    \n  Hier geben ‚to‘ und ‚from‘ den Beginn und das Ende der Animation an. Wir k\u00f6nnen auch Animationen f\u00fcr zwischenzeitliche Momente zwischen Start und Ende wie folgt spezifizieren:\n<\/p>\n
    @keyframes name\n{\n0%{ property: value; }\n50%{ property: value; }\n100%{ property: value; }\n}<\/code><\/pre>\n
    \n  Hier steht 0 % f\u00fcr den Beginn der Animation, 100 % f\u00fcr das Ende der Animation und 50 % f\u00fcr die \u00c4nderung zwischen Start und Ende. Aber wie teilen wir dem Browser mit, wie lange die Animation stattfinden soll? Wir tun dies mit Hilfe bestimmter Animationseigenschaften<\/strong>. Diese Animationseigenschaften werden dem zu animierenden Element zugeordnet. Zum Beispiel:\n<\/p>\n
    element_name\n{\nanimation_property: value;\nstyle_property: value;\n}<\/code><\/pre>\n
    \n  Hier kann das Element ein beliebiges HTML-Tag wie div, span, img, p usw. sein und style_property<\/code>ist eine beliebige CSS-Stileigenschaft wie background_color, width, height usw. Lassen Sie uns nun einige Animationseigenschaften im Detail betrachten.\n<\/p>\n
      \n
    1. \n    @keyframes<\/strong>: Keyframes werden verwendet, um den Animationscode wie oben beschrieben anzugeben.\n  <\/li>\n
    2. \n    animation-name<\/strong>: Der mit @keyframes angegebene Name ist der Name der Animation. \u00dcber diesen Namen werden die Keyframes mit dem zu animierenden Element referenziert.\n  <\/li>\n
    3. \n    animation-duration<\/strong>: Wird verwendet, um die Dauer der Animation in Sekunden oder Millisekunden anzugeben. Wenn wir es beispielsweise auf 5 Sekunden einstellen, l\u00e4uft die Animation nur 5 Sekunden lang. Wenn wir diese Eigenschaft nicht festlegen, wird die Animation \u00fcberhaupt nicht ausgef\u00fchrt, da ihr Standardwert 0 ist.\n  <\/li>\n
    4. \n    animation-delay<\/strong>: Wir k\u00f6nnen den Start der Animation verz\u00f6gern, indem wir die Animationsverz\u00f6gerungszeit angeben. Wenn Sie die Animation beispielsweise 5 Sekunden nach dem Laden der Seite im Browser starten m\u00f6chten, stellen Sie die Animationsverz\u00f6gerung einfach auf 5 Sekunden ein.\n  <\/li>\n
    5. \n    animation-direction<\/strong>: Mit dieser Eigenschaft k\u00f6nnen wir dem Browser mitteilen, ob sich eine Animation in die umgekehrte Richtung bewegt oder abwechselnd Zyklen durchl\u00e4uft. Wenn Sie beispielsweise m\u00f6chten, dass die Animation von Anfang bis Ende abl\u00e4uft, stellen Sie den Wert der Animationsdauer auf \u201enormal“. Wenn Sie m\u00f6chten, dass es von Ende zu Anfang l\u00e4uft, setzen Sie den Wert einfach auf „umgekehrt“.\n  <\/li>\n
    6. \n    animation-fill-mode<\/strong>: Wir k\u00f6nnen den Stil des Elements angeben, wenn die Animation nicht mit diesem Modus abgespielt wird, dh wenn die Animation verz\u00f6gert oder beendet ist, wie sollte der Stil des Elements sein.\n  <\/li>\n
    7. \n    animation-iteration-count<\/strong>: Wie oft eine Animation abgespielt werden kann, wird durch diese Eigenschaft dargestellt. Wenn Sie beispielsweise die Animation einmal abspielen m\u00f6chten, setzen Sie sie auf 1, oder wenn Sie m\u00f6chten, dass die Animation f\u00fcr immer abgespielt wird, stellen Sie sie einfach auf \u201eunendlich“.\n  <\/li>\n
    8. \n    animation-timing-function<\/strong>: Diese Eigenschaft wird verwendet, um die Geschwindigkeitskurve der Animation wie linear, Beschleunigung oder Entschleunigung anzugeben.\n  <\/li>\n
    9. \n    Animation<\/strong>: Dies ist die abgek\u00fcrzte Eigenschaft zum Einstellen aller Animationseigenschaften.\n  <\/li>\n<\/ol>\n
      \n  Beispielsweise k\u00f6nnen Sie ein h\u00fcpfendes Objekt mit dem folgenden Code-Snippet animieren. Beachten Sie, wie hier die Kurzschreibweise f\u00fcr Animationen verwendet wurde.\n<\/p>\n
      @keyframes slide {\n 0% {\n  left: 0;\n  top: 0;\n }\n 50% {\n  left: 244px;\n  top: 100px;\n }\n 100% {\n  left: 488px;\n  top: 0;\n }\n}\n \n.stage:hover .object {\n animation: slide 2s linear;    \/*shorthand animation property*\/\n}\n \n.object {\n background: #2db34a;\n border-radius: 50%;\n height: 50px;\n position: absolute;\n width: 50px;\n}<\/code><\/pre>\n
      \n  \u00dcberg\u00e4nge
      \n<\/h3>\n
      \n  CSS-\u00dcberg\u00e4nge werden auf Eigenschaften von Elementen f\u00fcr eine bestimmte Zeitdauer angewendet, basierend auf bestimmten Timing-Funktionen,<\/strong> auch bekannt als Easing-Funktionen. Mit Timing-Funktion meinen wir eine Funktion, die die Eigenschaften der Elemente von einem Zustand in einen anderen \u00e4ndert, wie z. B. lineare Progression, Beschleunigung oder Entschleunigung. Sie haben vielleicht bemerkt, dass ein Bild gleitet oder sich in ein anderes Bild verwandelt, wenn Sie mit der Maus dar\u00fcber fahren, oder ein Ton abgespielt wird, wenn Sie mit der Maus klicken. All dies sind \u00dcbergangseffekte, die eine Website interaktiv machen k\u00f6nnen.\n<\/p>\n
      \n  Easing-Funktionen<\/strong> sind wichtig f\u00fcr die Erstellung von \u00dcberg\u00e4ngen. Sie geben an, wie sich die Eigenschaften \u00e4ndern. Sie k\u00f6nnen auch die Rate \u00e4ndern, mit der sich der Wert von Eigenschaften vom Startpunkt bis zum Endpunkt eines \u00dcbergangs \u00e4ndert. Sie k\u00f6nnen \u00dcberg\u00e4nge auf folgende Weise anwenden:\n<\/p>\n
      element\n{\nstyle_property: value;\ntransition_property: value;\n}<\/code><\/pre>\n
      \n  Hier gibt element das HTML-Element an, das Sie transformieren m\u00f6chten, z. B. div, H1, img usw. style_property ist das CSS-Styling, das auf dieses Element angewendet wird. Betrachten wir nun einige \u00dcbergangseigenschaften<\/strong> :\n<\/p>\n