T3 Campus T3 Campus

CSS Transitions

Animationen im Web war Langezeit JavaScript vorbehalten. Dank CSS3 gehört dies nun der Vergangenheit an und man sollte auch nicht mehr JavaScript für Animationen nutzen. Das geht ohnehin mit CSS nun einfacher und ist performanter.

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.

Bereit mehr zu lernen?

Dann komme in meine TYPO3 Onlineschule

Als Mitglied des T3 Campus für TYPO3 Schulungen erhältst du eine einzigartige Lernplattform, um professionelle Webseiten mit TYPO3 zu erstellen. Egal, ob du ein Einsteiger, Umsteiger oder bereits erfahren bist – hier findest du die passenden Lernvideos für dich.

Kevin Chileong Lee

Gründer vom T3 Campus, TYPO3 Experte mit 10+ Jahren Erfahrung, TYPO3 Liebhaber.

Ich helfe dir dabei, deine Projekte in TYPO3 umzusetzen.

Insbesondere für TYPO3 Einsteiger biete ich zahlreiche kostenfreie Tutorials und kostenpflichtige Kurse rund um TYPO3 an.
Damit kannst du in wenigen Tagen auch ohne Vorkenntnisse deine erste TYPO3 Webseite erstellen und Erweiterungen programmieren.

Auf meinem YouTube-Kanal findest du viele praktische Beispiele und Videotutorials als auch allgemein Videos zu diversen TYPO3 Themen.

Neber den TYPO3 Tutorials und Kopiervorlagen, schreibe ich auch Artikel auf meinem Blog über diverse Themen und Fragen, die die meisten TYPO3 Einsteiger, haben.

Falls du ein TYPO3 Coaching suchst, dann stehe ich dir in einer 1:1 Trainingssession zur Verfügung.

Wenn du auf dem Laufenden sein möchtest über meine Projekte, dann abonniere den Newsletter.