transition-timing-function Werte veranschaulicht

An einem kleinem Beispiel möchte ich Werte der Eigenschaft „transition-timing-funktion“ veranschaulichen.

Bei einer transition gibt man den Start- und Endpunkt eines Eigenschaftswertes vor. So soll zum Beispiel die Schriftfarbe eines Paragraphen (p) von blau zu rot wechseln und zwar dann, und nur dann, wenn sich ein Benutzer mit der Maus über dem Paragrapen befindet. Die Berechnung des Überganges überlässt man dem Browser. Die Beschreibung der Start- und Endpunkte sehen dann in der CSS so aus:

p {
color: blue;
}

p:hover {
color: red;
}

Hä? Transition? Ohne Transition erhält man doch auch das, was man definiert hat. Ja! Dann noch 3 mal ja! Aber … Eine Transition nun soll den Übergang zwischen den beiden Zuständen animieren und flüssiger gestalten, um dem Benutzer ein besseres Gefühl beim Besuch der Webseite zu vermitteln. Ohne Transition ist es ein Wechsel, der ruckartig stattfindet. Mit einer Transition wird dieser Ruck abgefedert.

Weiterlesen

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