CSS Transitions

CSS3 ist mittlerweile (Stand: 2022) sehr flächendeckend kompatibel. Das liegt auch daran, dass Microsoft die Entwicklungsgeschwindigkeit für den Internet Explorer beschleunigt hat und nun auch auf Chromium setzt. Dadurch, dass der alte Internet Explorer oder Edge nicht mehr weiterentwickelt und supported werden, sind auch alle Benutzer und Firmen dazu gezwungen zu wechseln.

Dadurch kann man auf CSS3 zurückgreifen und seine JavaScript-Codes ersetzen. 

Eine CSS Animation kann für jedes HTML Element definiert werden. Dabei muss man dem Element sagen, welcher seiner Eigenschaften animiert werden sollen. Wenn man alle Eigenschaften animieren möchte, dann kann man die Angabe: all nutzen.

Eine cross-browser Definition sieht wie folgt aus:

#elementToAnimate {
    -webkit-transition: all 1s linear;
    -moz-transition:    all 1s linear;
    -o-transition:      all 1s linear;
    -ms-transition:     all .1s linear;
    transition:         all 1s linear;
}

Die obere CSS Definition definiert, dass jede Veränderung vom Element mit der ID: elementToAnimate mit einem linearen Effekt von 1 Sekunde dargestellt werden soll.

Die Veränderung wird dann mit einer CSS Klasse hervorgerufen.

Beispiel:

#elementToAnimate {
    -webkit-transition: all 1s linear;
    -moz-transition:    all 1s linear;
    -o-transition:      all 1s linear;
    -ms-transition:     all .1s linear;
    transition:         all 1s linear;

    width: 100px;
}

.expand {
    width: 200px;
}

Sobald das Element die Klasse: expand zugewiesen bekommt, vergrößert sich seine Breite auf 200px. Das geschieht nicht sofort, sondern linear mit einer Dauer von 1 Sekunde. Ergo, es wird animiert.

Die CSS Zuweisung erfolgt dann über JavaScript. Die Berechnung der Animation läuft dann direkt über den Browser und nicht über die JavaScript-Implementierung. Das ist performanter und resourcenschonender.