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!