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