CSS3: transition – animierte Übergänge

Das englische Wort „transition“ bedeutet soviel wie „Übergang, Überleitung, Umschaltvorgang“.

Bisher können wir auf Mausaktionen mit CSS über beispielsweise a:hover { ... reagieren. Allerdings passiert die Aktion dann abrupt. Es erfolgt eine sofortige Umschaltung. Über die CSS3-Anweisungen mit transition können wir die Art der Umschaltung bestimmen.

Wir können

• die Dauer der Umschaltung festlegen
• die Art beispielsweise der Bewegung
• welche Elemente
• ob das verzögert passieren soll

Dadurch sind ganz neue Möglichkeiten vorhanden, dem Nutzer ein neues Erlebnis einer Website zu verschaffen.

Bisher haben wir in CSS die Anweisungen über :hover – im folgenden Beispiel erhält in der Steuerung bei Überfahren mit der Maus eine Farben, die Textunterstreichung und einen Abstand nach links:

#steuerung a:hover { 
    color: blue; 
    text-decoration: underline; 
    margin-left: 20px; 
    background-color: orange;
}

Unsere Voreinstellungen (nicht besonders hübsch), aber verdeutlichen schnell unser Beispiel ist als Textfarbe Rot, keine Unterstreichung und einen Abstand nach oben und unten:

#steuerung a { 
    color: red; 
    text-decoration: none; 
    padding: 0 10px;
}

Natürlich benötigen wir auch unser normales HTML, wobei wir unserem Navigationsbereich die ID mit dem Namen „steuerung“ mitgeben.

<nav id="steuerung">
    <ul>
        <li><a href="#">Startseite</a></li>
        <li><a href="#">CSS2</a></li>
        <li><a href="#">CSS3</a></li>
    </ul>
</nav>

Das Ganze kann auch direkt getestet werden über:
https://www.html-seminar.de/beispielcode/beispiel-css3-transition-1.htm

Erweiterung CSS

Wenn jetzt jemand mit der Maus über unsere Link fährt, sollen weitere Parameter mitgegeben werden, damit der Übergang nicht schlagartig stattfindet. Dazu wird unser CSS im Bereich des Links (in diesem Beispiel) erweitert. Was vielleicht irritiert, ist, dass diese Anweisungen nicht im Bereich der CSS, wo das Endstadium ist, zugeteilt wird, sondern im Ausgangsstadium.

#steuerung a:hover { 
    color: blue; 
    text-decoration: underline; 
    margin-left: 20px; 
    background-color: orange; 

    // HIER FINDET DIE ERWEITERUNG STATT 
}

#steuerung a { 
    color: red; 
    text-decoration: none; 
    padding: 0 10px; 
}

Und folgende Befehle werden aufgenommen:

#steuerung a:hover { 
    color: blue; 
    text-decoration: underline; 
    margin-left: 20px; 
    background-color: orange; 

    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}

#steuerung a { 
    color: red; 
    text-decoration: none; 
    padding: 0 10px; 
} 

Wegen verschiedenen Browsern (und hier vor allen wegen den alten Versionen der Browser) werden mehr als 1 Zeile notwendig. Es wird für die verschiedenen Browser die Angaben gemacht und erst am Ende die allgemeine CSS-Anweisung. So sind dann auch alte Browserversionen abgedeckt.

Das Ganze kann auch direkt getestet werden über:
https://www.html-seminar.de/beispielcode/beispiel-css3-transition-2.htm

Bedeutung der CSS-Anweisung transition

Schauen wir uns die eigentlichen CSS-Anweisungen von transition an.

Es gibt hierfür die Kurzschreibweise, die wir in unserem Beispiel oben bereits kennen gelernt haben:

transition: all 2s ease;

Die Kursschreibweise hat die Vorteile, dass man weniger Platz benötigt und auch weniger Tippfehler man daher macht. Aber schauen wir uns auch die Langschreibweise an, damit schneller ein Verständnis für die transition-CSS-Anweisung aufgebaut werden kann.

transition-property: all;
transition-duration: 2s;
transition-timing-function: ease;

Die Bedeutung der einzelnen Anweisungen:

Anweisung: transition-property

Über diese CSS-Anweisung kann ich bestimmen, auf was sich der Übergang auswirken soll. Nehmen wir zum einfacheren Verständnis wieder unseren bisherigen Beispielcode:

#steuerung a:hover { 
    color: blue; 
    text-decoration: underline; 
    margin-left: 20px; 
    background-color: orange; 
    transition-property: all;
}

Bei der Attributwert „all“ bezieht es sich auf in diesem CSS-Bereich aufgeführten Elemente – also sowohl auf die Vordergrund- wie auch auf die Hintergrundfarbe, also auch auf die Textunterstreichung wie auch auf die Außenabstände.

Wir können unsere Angabe auch einschränken. Anstelle von „all“ könnten wir auch nur die Vordergrundfarbe beeinflussen wollen. Dann kommt als Angabe:

#steuerung a:hover { 
    ...
    transition-property: color;
}

Hier können wir auch mehrere Elemente beeinflussen:

#steuerung a:hover { 
    ...
    transition-property: color, margin-left;
}

Anweisung: transition-timing-function

Hier können wir den Ablauf beeinflussen. Dazu bitte kurz sich das Auto vom Nachbarn vorstellen. Dieses wird aus dem Stand nicht automatisch 100 km/h fahren. Es wird beschleunigen und eine gewisse Zeit benötigen, bis es 100 km/h dann fährt (genauso auch beim Anhalten).

Und da wir natürlich am besten für das Nutzererlebnis fahren, wenn wir gewohntes Abbilden, können wir auch hier über die transition-timing-function mitgeben, wie sich das Element verhalten soll. Jetzt bei einer Farbüberblendung mag das Autobeispiel nicht wirklich griffig sein, aber wir können Elemente auch bewegen. Und hier kommt dann das Attribut „ease“ zum Einsatz. Das englische Wort „ease“ bedeutet „sich beruhigen“.

Unser Auto würden wir also über „transition-timing-function: ease;“ mit CSS animieren.

Sollte der Nachbar das Auto extrem abrupt abbremsen (nur möglich, wenn er mit dem Auto gegen eine Felswand fährt (sprich die Geschwindigkeit annährend von 100 auf 0 in einem Sekundenbruchteil sich verringert (was man niemand wünsche sollte)) – dann kann diesen Vorgang in CSS über „ease-in“ abgebildet werden.

Die wenigsten Aktionen sind linear – aber auch das kann mit CSS genutzt werden.

Anweisung: transition-duration

Die Dauer der Ausführung. Hier können Sekunden angeben werden oder auch kleinere Werte:

transition-duration:2s;

oder auch kleinere Werte wie beispielsweise ¼ Sekunde.

transition-duration: 0.25s;

Anweisung: transition-delay

Soll die Animation erst mit Verzögerung starten, kann die Verzögerung (englisch „delay“) auch angegeben werden.

Hier in unserer Kurzschreibweise als zweiter Zeitwert:

transition: all 2s 1s ease;

Die Dauert der Animation beträgt 2 Sekunden, aber sie startet erst nach 1 Sekunde.