Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

Demnächst auf Ihrem Bildschirm: CSS3-Animations mit der neuen JavaScript-Methode animate()

  • Aktualisiert am 4. April 2023
  • Denis Potschien von Denis Potschien
  • Webdesign
  • Ein Kommentar

Seit CSS3 sind Animationen in HTML-Dokumenten kein Problem mehr. Mit der „@keyframes“-Regel werden verschiedene Eigenschaften wie Position oder Größe eines HTML-Elementes definiert. Die dazugehörige „animation“-Eigenschaft sorgt dafür, dass die in den Keyframes festgelegten Eigenschaften in Bewegung geraten. Ganz ohne JavaScript und Plug-ins erstellen Sie so auch durchaus komplexe Animationen, die in allen modernen Browsern problemlos laufen. Problematisch wird es, wenn JavaScript ins Spiel kommen soll, um CSS3-Animationen zu erzeugen. Dabei ist JavaScript gerade für Animationen ein oft unverzichtbares Werkzeug. Denn manchmal müssen oder sollen einzelne Werte oder ganze Animationsabläufe errechnet werden.

css3_javascript_animate

CSS und JavaScript mit „animate()“-Methode kombinieren

Die neue „animate()“-Methode von JavaScript ermöglicht es, Animationen ausschließlich per JavaScript zu realisieren – allerdings unter Verwendung von CSS-Eigenschaften, um einzelne Keyframes für eine Animation zu definieren.

document.getElementById("element").animate([  {height: "0"},  {height: "100%"}], {  duration: 3000,  iteration: 2,  delay: 1000});

Im Beispiel wird einem Element die Methode „animate()“ zugewiesen. Innerhalb eckiger Klammern werden beliebig viele Zustände einer CSS-Eigenschaft definiert – im Beispiel sind es Angaben für die Eigenschaft „height“. Jede Angabe wird als Objektliteral dargestellt. Es dürfen hierbei immer nur Werte für eine einzige CSS-Eigenschaft angegeben werden. Eine Kombination von „height“ und beispielsweise„width“ ist nicht möglich.

Zu beachten ist, dass die Werte für die CSS-Eigenschaften immer in Anführungszeichen stehen müssen. Die CSS-Eigenschaften selbst müssen JavaScript-konform angegeben werden, also „backgroundColor“ statt „background-color“.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

In einem weiteren Objektliteral, das nach der eckigen Klammer folgt, werden Eigenschaften für die Animation definiert. Dazu gehören die Animationsdauer „duration“, die Anzahl der Wiederholungen „iteration“ sowie optional eine Verzögerung „delay“, welche festlegt, wann die Animation beginnen soll. Zeitangaben werden hierbei wie üblich in Millisekunden angegeben.

Mehrere Keyframes und ihre Dauer definieren

Für jede zu ändernde Eigenschaft muss die „animate()“-Methode separat aufgerufen werden. Will man neben der Höhe auch die Breite ändern, muss dies über einen erneuten Aufruf geschehen.

document.getElementById("element").animate([  {width: "0", offset: 0},  {width: "10%", offset, 1/3},  {width: "100%", offset: 1}], {  duration: 3000,  iteration: 2,  delay: 1000});

Im Beispiel wird für das Element die Breite geändert. Für die Animation sind drei verschiedene Zustände definiert. Die Breite soll von 0 über 10 Prozent bis 100 Prozent per Animation verändert werden. Die zusätzliche Option „offset“ gibt an, wieviel Zeit jeder definierte Zustand erhalten soll.

So wird die Animation von 0 zu 1o Prozent ein Drittel der Animation dauern, die Animation von 10 zu 100 Prozent zwei Drittel der Animation. Ausschlaggebend ist immer die Gesamtdauer der Animation, die per „duration“ angeben wird. In diesem Fall wird der erste Teil der Animation eine Sekunde dauern (ein Drittel von 3 Sekunden), der zweite Teil zwei Sekunden.

Statt den Wert für „offset“ als Bruch anzugeben, ist auch die Angabe als Dezimalzahl möglich. Der Wort muss hierbei zwischen 0 und 1 liegen, zum Beispiel „0.33“ statt „1/3“.

Weitere Animationsoptionen

Die „animate()“-Methode kennt weitere Optionen, um die Bewegung zu steuern, die auch von der CSS3-Eigenschaft „animation“ bekannt sind. So lassen sich die Richtung der Animation und die Beschleunigung definieren. Außerdem kann bestimmt werden, ob nach Ablauf der Animation wieder der Ausgangspunkt der Animation gezeigt werden soll.

document.getElementById("element").animate([  …], {  duration: 3000,  iteration: 2,  delay: 1000,  direction: "reverse",  easing: "ease-in",  fill: "forwards"});

Der Wert für „direction“ gibt die Animationsrichtung an. So wird bei „reverse“ die Animation rückwärts abgespielt. „alternate“ spielt die Animation zunächst vorwärts, dann rückwärts ab. Und „alternate-reverse“ kombiniert die letzten beiden Werte.

Für „easing“ sind die gängigen Easing-Methoden von CSS3 möglich, also „ease-in“, „ease-out“ etc. Standardmäßig wird die Animation linear – also ohne Beschleunigung und Abbremsung – aufgeführt. Der Wert für „fill“ bestimmt, was nach Ablauf der Animation dargestellt werden soll. Standardmäßig wird der Ausgangspunkt der Animation wieder aufgerufen. Mit „forward“ bleibt nach Abschluss der Animation das letzte Keyframe der Animation stehen.

Animation steuern

Wird die „animate()“-Methode einer Variable zugewiesen, hat man die Möglichkeit, die Animation per JavaScript zu steuern. So ist es möglich, die Animation abspielen und stoppen zu lassen.

var animation = document.getElementById("element").animate([  {height: "0"},  {height: "100%"}], {  duration: 3000,  iteration: 2,  delay: 1000});document.getElementById("animation_start").addEventListener("click", function() {  animation.play();}, false);document.getElementById("animation_pause").addEventListener("click", function() {  animation.pause();}, false);

Die Animation wird im Beispiel der Variable „animation“ zugewiesen. Anschließend werden zwei Elementen mit der ID „animation_start“ und „animation_pause“ Event-Listener zugewiesen, die dafür sorgen, dass beim Klick auf die Elemente die jeweils angegebenen Funktionen ausgeführt werden. Per „play()“ wird die Animation abgespielt, mit „pause()“ wird sie angehalten.

Außerdem ist es mit „reverse()“ möglich, die Animation rückwärts laufen zu lassen. Per „cancel()“ kann die Animation abgebrochen werden. Wird die Animation per „play()“ dann wieder gestartet, beginnt sie von vorne. Darüber hinaus nutzen Sie „finish()“, um die Animation zum Ende zu bringen, indem das letzte Keyframe angesteuert wird.

Event-Listener reagiert auf das Ende der Animation

Wer auf das Abspielende einer Animation reagieren möchte, kann den Event-Listener „finish“ nutzen. Dieser führt eine zu definierende Funktion aus, sobald das Ende einer Animation erreicht ist.

animation.addEventListener("finish", function() {  alert("Die Animation wurde beendet.");}, false);

Im Beispiel wird einfach eine Meldung ausgegeben, sobald das Ende der Animation erreicht ist.

Browser-Support

Die „animate()“-Methode ist derzeit noch in einem experimentellen Stadium und wird daher erst ab Chrome in der Version 36 implementiert sein. Wer es testen will, installiert sich Chrome Canary, die Entwicklerversion von Chrome.

(dpe)

Denis Potschien

Denis Potschien

Denis Potschien ist seit 2005 freiberuflich als Kommunikationsdesigner tätig, seit Anfang 2010 im Kreativkonsulat in Iserlohn, einem Büro für Gestaltung und Kommunikation. Dort betreut er kleine und mittelständische Unternehmen ebenso wie kommunale Körperschaften und Organisationen aus Südwestfalen und dem Ruhrgebiet. Als Webdesigner und -entwickler gehören HTML5 und CSS3 zu seinen Kernthemen, weshalb er dazu 2013 ein Buch geschrieben hat. „Pure HTML5 und CSS3“ richtet sich an alle, die Vorkenntnisse haben, sich aber bisher mit HTML5 und CSS3 nicht oder nur am Rande beschäftigt haben.

Inhaltsverzeichnis

Agenturpartner in Augsburg

Edit Content

Online Marketing Expert

Herzlich Willkommen beim Online Marketing Expert Team!

Wir sind eine Online Marketing Agentur mit einem Büro in der Augsburger Innenstadt. Unsere Experten haben jahrelange Erfahrungen in Ihren Fachgebieten. Wir beraten Sie individuell und strategisch!

Spezialgebiete unserer Agentur sind die Suchmaschinenoptimierung sowie das Advertising bei Suchmaschinen und Social Media.

Wir freuen uns auf eine Zusammenarbeit. Die Kontaktaufnahme und das Erstgespräch sind für Sie unverbindlich und kostenlos. Alle weiteren Infos zu unseren Dienstleistungen finden Sie auch auf unserer Webseite.

— Manuel Sika,
Inhaber
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

Eine Antwort

  1. Janik sagt:
    9. Juni 2014 um 19:43 Uhr

    Eine spannende Methode. Gibt es Benchmarks oder direkte Vergleichswerte gegenüber vollwertigen javascript Animationen mit jquery bzw. in wie fern geben sich die beiden Varianten Vor- und Nachteile?

    Antworten

Schreibe einen Kommentar Antworten abbrechen

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

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen