Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

CSS3: Animationen ohne Flash und JavaScript erstellen

    CSS3: Animationen ohne Flash und JavaScript erstellen

Lange Zeit war Flash erste Wahl, wenn es um das Erstellen von Animationen ging. Mit der rückläufigen Verbreitung von Flash auf Mobilgeräten werden Alternativen immer mehr an Bedeutung gewinnen. Mit der Einführung von CSS3 lassen sich Animationen ganz ohne Flash und JavaScript, sondern einzig mit CSS realisieren.

Neben der Tatsache, dass zukünftig kein Plugin mehr geladen werden muss, um Animationen ausführen zu können, sind CSS3-Animationen wesentlich schneller als manch eine mit JavaScript realisierte Animation. Gerade für Mobilgeräte, die ohnehin begrenzte Ressourcen haben, sind Animationen per CSS3 die ideale Wahl.

CSS3-Transitions für ereignisabhängige Animationen

Mit der CSS3-Eigenschaft „transition“ lassen sich ereignisabhängige Animationen erstellen. Dazu werden für ein HTML-Element zwei unterschiedliche CSS-Zustände definiert, welche Aussehen und Position zum Beginn und zum Ende der Animation darstellen. Über die Eigenschaft „transition“ wird der animierte Übergang zwischen beiden Zuständen festgelegt:

#etwas {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  opacity: 0.5;
  transition: all 1s ease-in-out;
}

#etwas:hover {
  position: absolute;
  left: 40px;
  top: 40px;
  width: 120px;
  height: 120px;
  background-color: blue;
  opacity: 1;
}

Im Beispiel werden zwei Zustände für das HTML-Element – zum Beispiel ein DIV-Container – mit der ID „etwas“ definiert. Der erste Zustand beschreibt Aussehen und Position im Normalfall, der zweite Zustand beim Darüberfahren mit der Maus (Hover-Effekt).

Über die Eigenschaft „transition“ wird der animierte Übergang definiert. Die drei Angaben für diese Eigenschaft legen Umfang, Dauer und Art der Animation fest. Der erste Wert gibt an, welche Eigenschaften animiert werden sollen – „all“ berücksichtigt alle Eigenschaften, „background-color“ würde nur den Farbwechsel animieren. Der zweite Wert gibt die Länge der Animation in Sekunden an. Der letzte Wert gibt die Art der Animation an – „ease-in-out“ lässt die Animation langsam starten, beschleunigt zur Mitte und bremst zum Ende der Animation wieder ab.

Mit „ease-in“ wird die Animation am Anfang beschleunigt, behält dann ihre Geschwindigkeit bis zum Ende bei, mit „ease-out“ wird am Ende nur abgremst und bei „linear“ hat die Animation kontinuierlich dieselbe Geschwindigkeit.

Für die Eigenschaft „transition“ muss derzeit noch die entsprechende Vendor-Variante (für Mozilla „-moz-transition“, für Webkit „-webkit-transition“) verwendet werden.

Eine Demo zum Beispiel findet ihr auf JsFiddle.

Anzeige

CSS3-Keyframe-Animationen

Die CSS3-Transitions sind also einfache Animationen mit zwei Zuständen. Es lassen sich jedoch auch komplexe Animationen erstellen, die beliebig viele Zustände bei der Animation berücksichtigen. Über die „@keyframes“-Regel, der man für jede Animation einen Namen gibt, werden alle Zustände einer Animation festgelegt:

@keyframes bewegdich {
  50% {
    left: 150px;
    transform: rotate(45deg);
  }
  100% {
    top: 200px;
  }
}

An welcher Stelle innerhalb der Animation bestimmte Zustände verändert werden sollen, wird über eine prozentuale Angabe festgelegt. Im Beispiel wird zwischen null und 50 Prozent die Position auf der X-Achse sowie die Drehung geändert. Zwischen 50 und 100 Prozent wird die Position auf der Y-Achse geändert.

Die Drehung wird in der zweiten Hälfte der Animation wieder zurückgenommen, da sich die Zustände immer auf den Ausgangszustand beziehen. Will man die Drehung beibehalten, muss sie auch in der zweiten Angabe angegeben werden.

Die „@keyframes“-Regel kann nun mit der Eigenschaft „animation“ einem HTML-Element zugewiesen werden:

#etwasanderes {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  animation: bewegdich 2s;
}

Neben dem Namen für die Animation („bewegdich“) wird die Dauer angegeben. Nach Beendigung der Animation springt sie wieder auf den Ausgangszustand zurück. Es können jedoch noch weitere Einstellungen für die Animation vorgenommen werden:

#etwasanderes {
  position: absolute;
  left: 50px;
  top: 50px;
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: bewegdich;
  animation-duration: 2s;
  animation-iteration-count: 2;
  animation-direction: alternate;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
  animation-delay: 2s;
}

Über die Eigenschaft „animation-iteration-count“ wird die Anzahl der Durchläufe für die Animation angeben. Beim Wert „infinite“ wird die Animation in einer Endlosschleife ausgeführt. Die Eigenschaft „animation-direction“ gibt an, ob die Animation für den zweiten Durchlauf zum Anfang springen soll (ist standardmäßig so) oder ob für den zweiten Durchgang die Animation rückwärts abgespielt werden soll („animation-direction: alternate“).

Die Eigenschaft „animation-timing-direction“ bestimmt die Beschleunigung beziehungsweise das Abbremsen der Animation (wie auch bei der Eigenschaft „transition“). Die Eigenschaft „animation-fill-mode“ gibt an, ob die Animation am Ende wieder zum Anfang zurückspringen soll (ist standardmäßig so) oder ob der erreichte Zustand beibehalten werden soll („animation-fill-mode: forwards“). Die letzte Eigenschaft „animation-delay“ gibt eine Zeit an, die gewartet werden soll, bis die Animation erneut abgespielt wird.

Wie auch bei der Eigenschaft „transition“ muss man die „@keyframes“-Regel und die Eigenschaft „animation“ als Vendor-Variante (zum Beispiel „@-moz-keyframes“ und „-moz-animation“) angeben. Unterstützt werden die Animationen mittlerweile von allen gängigen Browsern mit Ausnahme des Internet Explorers, der es wohl erst ab Version 10 kann.

Eine Demo zum Beispiel findet ihr auf JsFiddle.

Nutzt ihr die hier vorgestellten Animationsmöglichkeiten bereits? Sind die eurer Meinung nach ein guter Ersatz für Flash-Animationen?

Weiterführende Links zum Thema CSS3:

Finde einen Job, den du liebst

2 Reaktionen
Charly
Charly

"... Mit der rückläufigen Verbreitung von Flash auf Mobilgeräten werden Alternativen immer mehr an Bedeutung gewinnen... ".

Sorry, aber was ist denn das für eine Aussage? Generell haben Flashseiten auf mobilen Endgeräten nie eine besondere Verbreitung oder Ansehen gefunden. Letztlich hat auch Adobe auf Grund dessen die Entwicklung der mobilen Flash Players eingestellt.

Es war also vorher auch nie anders, dass mobile Seiten in HTML, CSS(3) und/oder JS geschrieben wurden.

Jedoch am Rande bemerkt:
Mit CSS3, JS, HTML sind RIA-Anwendung, Echtzeit Spiele mit Shader & Kamera inkl. Multiplayer & Co., Desktop Software oder Apps mit aufwendige Animationen und Berechnungen, sowie SpieleApps schlicht NICHT umsetzbar. Geht einfach nicht. Wird auch nie möglich sein.

LG

Antworten
Markus

Interessante Möglichkeit für einfache Animationen.
Leider spielt hier der IE wieder nicht mit.

Antworten
Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Hinweis

Du hast gerade auf einen Provisions-Link geklickt und wirst in Sekunden weitergeleitet.

Bei Bestellung auf der Zielseite erhalten wir eine kleine Provision – dir entstehen keine Mehrkosten.


Weiter zum Angebot