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

Kleine Animation mit CSS und einem spritesheet

Ein Spritesheed ist eine einzelne Grafikdatei, die aber mehrere kleinere Bildchen, Icons, Symbole oder Abwandlungen davon enthält. Mit CSS kann man dann prächtig die Positonen der gewünschten “Bildchen” ansteuern. Es müssen hier jeweils aber nicht mehrere Grafiken geladen werden, sonder nur eine. Das spart Ladezeit und http-Anforderungen. In der Vergangenheit habe ich sprites z. B. für unterschiedliche Linkzustände hover, active etc. benutzt.

Prinzip: unterschiedliche Zustände (hover, active), unterschiedliche Positionen der Hintergrundgrafik.

Hover und Klick drauf!

<a id="css3sprite"></a>

#css3sprite {
width: 160px;
height: 160px;
display: block;
background: url(http://www.css3.de/upload/Peileppe_footman.png);
background-position: 0;
}
#css3sprite:hover {
background-position: -320px;
}
#css3sprite:active {
background-position: -480px;
}

Mit CSS3 und den @keyframes animationen kann man das Spritesheet auch als “Filmstreifen” verwenden, der dann, Sequenz für Sequenz (unterschiedliche Positionen in dem Spritesheet), abläuft.

Hier das Spritesheet als Beispiel (verkleinert auf 600px width):
Peileppe_footman

{
..
animation: spritesanim 1s steps(5) infinite;
..
}
@keyframes spritesanim {
to {
background-position: -800px;}
}

Hier die Animation:

spritesheet: Quelle (openclipart.org, Footman von user: Peileppe)