Einfache CSS-Transition:

Der Transition-Befehl ist ein shorthand, welches aus der property, duration, timing und dem delay besteht.

1. Wert: transition-property, 2. Wert: transition-duration, 3. Wert: transition-timing-function, 4. Wert: transition- delay

Bei CSS versteht man unter Shorthand-Properties eine verkürzte Schreibweise des CSS-Codes. Erkennen kann man diese dadurch, dass alle Angaben unter einem Punkt zusammengefasst werden und nicht einzeln aufgeschrieben werden (Longhand-Properties).

Mit einer „Transition“ ist ein Übergang gemeint, wie in unserem Beispiel die Farb- und Formänderung des Buttons, sobald die Maus darüber verweilt (a:hover). Durch „delay“ wird die Verzögerung eingestellt, wie lange der Farbwechsel benötigt. Mit „a::before“ wird das Aussehen des Buttons bestimmt, bevor die „Transition“ beginnt