CSS Animationen

0 | 17819 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "CSS Animationen" mit Ihrem Wissen!

Mit CSS3 kommen einfache, zugängliche, deklarative Animationen.

Ohne großen Aufwand können so dezente Übergänge etc. verwirklicht werden. Ohne Flash-Anwendung oder einer JavaScript-Datei.

Anzeige Hier werben

CSS3-Animationen funktionieren derzeit nur mit Safari 4 und Firefox 5. Da der Standard noch unverabschiedet ist, wird dazu jeder angehörigen Eigenschaft das Präfix "-webkit-" vorangestellt.

@keyframes: Schlüsselzustände festlegen

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
@keyframe

Mit @keyframes lassen sich verschiedene Zustände einer CSS-Animation definieren.

animation-name: Animation anwenden

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
animation-name

Werte: String

Mit animation-name wird die Animation aus @keyframes auf ein Element angewendet - verwendet wird dabei der vorher definierte Name der Animation.

animation-timing-function: Animationspfad festlegen

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
animation-timing-function

Werte: ease, linear, ease-in, ease-out, ease-in-out, cubic-bezier()

Mit animation-timing-function wird der Pfad den die Animation abläuft über Bezier-Kurven definiert.

animation-iteration-count: Wiederholungen

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
animation-iteration-count

Werte: positiver Zahlenwert, infinite

Mit animation-iteration-count wird festgelegt, wie oft die Animation ablaufen soll. Auch unendlich ist möglich.

animation-direction: Animationen alternieren

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
animation-direction

Werte: normal, alternate

Mit animation-durantion lässt sich bestimmen, ob die Animation alle zwei Mal invertiert werden soll.

animation-delay: Start verzögern

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
animation-delay

Wert: Zeitangabe

Mit animation-delay lässt sich der Startzeitpunkt der Animation nach vorne und hinten schieben.

animation-duration: Durchlaufdauer

Firefox3.6Unbekannt4Unbekannt
IE6Nein7Nein8Nein9Unbekannt
Opera10Unbekannt11Unbekannt
Safari4Unterstützt5Unbekannt
animation-duration

Wert: Zeitangabe

Mit animation-duration wird die Dauer eines Durchlaufs festgelegt.


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 4 Personen an der Seite "CSS Animationen" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "CSS Animationen" hier bearbeiten.

Mitarbeiter
  • hat keine Beschreibung angegeben. Eine Beschreibung kann man unter dem Punkt "Profil bearbeiten" im Kontrollzentrum eintragen.
  • Ein Künstler hat keine besonderen physischen Fähigkeiten - er besitzt nur eine andere Wahrnehmung (...)
  • arbeitet seit längerem als Webdesigner und vor allem -entwickler. Er ist Webmaster von Webmasterpro.de und leitet den Flashcounter-Service.
  • oho keine Angaben