Unterschiede zwischen CSS3 transition und animation per @keyframes

Ich hänge aktuell immer noch an dem Thema Transitionen und Animationen. Weil es mir für mich und vielleicht auch für den ein- oder anderen von Euch wichtig ist, habe ich im folgenden einmal versucht, die Unterschiede festzuhalten.

CSS3 transition versus @keyframes animation:

  1. Eine Transition hat jeweils einen definierten Start- und Endzustand. Die Animation dazwischen, also ab Start des Überganges bis zum Erreichen des Endzustandes, kann nicht beeinflusst werden. Eine Animation gibt dem Designer dagegen neben definierten Start- und Endpunkten die Möglichkeit, weitere keyframes, Ziwschenstationen, zu definieren.
  2. Eine Transition braucht zwingend einen Auslöser, einen Trigger. Dies ist die Reaktion auf eine Eigenschaftsänderung eines Elementes durch Benutzeraktion (z.B. mouseover :hover). Wenn hierfür javascript benutzt wird, liegt in der Regel auch eine “Vortäuschung” einer Eigenschaftsänderung z.B. durch Ändern von Klassen vor. Eine Animation braucht keinen Trigger und läuft, wenn gewünscht, z.B. nach dem Laden der Seite ab.
  3. Eine Transition läuft nur einmal bis der Endzustand erreicht, oder die vorherige Eigenschaftsänderung zurückgenommen wurde (z. B. mouseout). Eine Animation kann mehrmals oder in einer Schleife durchlaufen.

Wer weitere Unterschiede weiß, oder das oben geschriebene korrigieren möchte, bitte her damit, ich nehme das gerne mit auf!

  • Veröffentlicht in: CSS3

CSS3 Animation mit @keyframes – meine erste Animation mit CSS3

CSS3 Animationen sind noch nicht allzu verbreitet, trotzdem lohnt ein Blick dahin, anders gesagt, meine erste CSS3-Animation mit @keyframes ist fällig! (den Schritten des Beispiels auf W3Scools.com folgend.)

Eine CSS3 Animation ist eine zeitliche Abfolge von CSS-Eigenschaftsänderungen.

Zuerst erstelle ich mit der keyframes-Regel (@keyframes) die Animation. Ich weise (mindestens) dem Start- und Endpunkt der Animation Eigenschaften zu. Während der Animation wechselt dann der Zustand, der Wert der Eigenschaft, vom ersten zum nächsten, bis zum letzten Wert. Die Animation braucht einen Namen. Dieser Name ist ein Selektor -> ??? merken!

@keyframes animationsname
{
from {background: url(http://www.css3.de/css3-LoGO.png) top left;}
to: {background: url(http://www.css3.de/css3-LoGO.png) top right;}
}

Statt “from” und “to” kann die Angabe auch in Prozent erfolgen (Animation von 0% bis 100%).

Diese Animation muss ich mit der Angabe des Animationsnamens und der Dauer der Animation einem Element zuweisen.

Element {
animation: animationsname 10s;
}
Mindestangabe ist hier der Name und die Dauer der Animation.

In meinem Fall sollte also die Grafik für 10 Sekunden von links nach rechts laufen und dann wieder zurück. Hey, ich habe eine CSS3-Animation erstellt, meine erste kleine Animation mit CSS3 @keyframes ist fertig!

Hier die CSS-Angaben:

Weiterlesen