Grundlagen CSS Animationen

[Franko]

Animationen beleben deine Inhalte und begegnen dir in den unterschiedlichsten Bereichen. Sparsam eingesetzt kannst du in jedem Fall die gewünschte Aufmerksamkeit erzielen.
Die folgenden Infos/Links beinhalten eine kleine Übersicht der Grundlagen. Evtl. auch hilfreich wenn du z.B. »animista.net« Beispiele nachvollziehen möchtest.
Contao unterstützt dich bei der Realisierung, entweder über manuelle CSS/JavaScript Einbindung oder über den Einsatz von Erweiterungen.


Grundlagen

Mittlerweile können Animationen in aktuellen Browsern über CSS-Angaben realisiert werden. Für komplexe Aufgaben stehen entsprechende
JavaScript-Frameworks wie z. B. »createjs (2D)«, »threejs (3D)« oder »animejs« zur Verfügung.

Weiterhin können Animationen auch direkt in .svg Dateien über die »Synchronized Multimedia Integration Language« (SMIL) realisiert werden.

Eine Animation definiert sich über die Änderung eines Objektes in einer bestimmten Geschwindigkeit über einen definierten Zeitraum (Easing o. a. Tweening).
Die Änderung kann sich z. B. auf die Größe, Position oder Stil (auch in Kombination) eines Objektes beziehen.


Eigenschaften »transition« und »transform«

Hinsichtlich der CSS-Umsetzung sind die Eigenschaften »transition« und »transform« relevant. Im folgenden ein einfaches Beispiel für ein animiertes Symbol:

<style>
.symbol {
  margin: 1em;
  width: 40px;
}
.symbol::before, .symbol::after, .symbol div {
  background-color: #000;
  border-radius: 3px;
  content: '';
  display: block;
  height: 5px;
  margin: 7px 0;	
  transition: all .2s ease-in-out;	
}
.symbol:hover::before { transform: translateY(12px) rotate(135deg); }
.symbol:hover::after  { transform: translateY(-12px) rotate(-135deg); }
.symbol:hover div     { transform: scale(0); }
</style>

<div class="symbol"><div></div></div>

Diese Art der Umsetzung benötigt einen Auslöser (Event). Wie im obigen Beispiel als »Hover-Event» oder anderenfalls über ein »Klick-Event« mittels JavaScript.


Keyframes und die Eigenschaft »animation«

Als Alternative kannst du eigene Animations-Regeln über »@keyframes« in Verbindung mit der Eigenschaft »animation« definieren.
Die einzelnen Schritte der Animationssequenz können hierbei gezielt kontrolliert werden. Diese Vorgehensweise ähnelt der »transition« Nutzung,
setzt allerdings eine Animationen automatisch und kontinuierlich in Kraft und nicht als Reaktion auf ein Event.

Im folgenden ein klassisches Beispiel für einen »hüpfenden« Ball. Hierbei verwenden wir die CSS-Eigenschaft »translate3d« und
statt der üblichen »easing« Funktion nutzen wir eine eigene Definition über »cubic-bezier«.

<style>
.bouncing-ball {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #f47c00;

  animation: bounce 0.5s;
  animation-direction: alternate;
  animation-timing-function: cubic-bezier(.5,0.05,1,.5);
  animation-iteration-count: infinite;
}

@keyframes bounce {
  from { transform: translate3d(0, 0, 0);    }
  to   { transform: translate3d(0, 50px, 0); }
}
</style> 

<div class="bouncing-ball"></div>

Die Eigenschaft »transform-origin«

Die CSS-Eigenschaft »transform-origin« legt den Ankerpunkt für die Transformationen eines Elements fest.
Ein Ankerpunkt ist der Punkt, um den eine Transformation angewendet wird. Möchtest du z.B. den Ausgangspunkt der Rotation eines Objekts ändern,
kannst du die entsprechende Position über diese Eigenschaft definieren.


Animation Framework

Für CSS-Animationen stehen zahlreiche OpenSource Lösungen zur Verfügung. Die wohl bekannteste ist »animate.css». Auf der Webseite findest
du entsprechende Beispiele zusammen mit einer detaillierten Dokumentation.

Hierbei werden die zahlreichen Animationen über CSS-Klassen definiert. Da du in Contao in allen Inhaltselementen und Modulen CSS-Klassen angeben kannst,
musst du lediglich die aktuelle Version der »animate.css« Datei deinem Seitenlayout hinzufügen.

Im Anschluß kannst du zur Animation eines Contao Inhaltselement vom Typ Text im Bereich »Experteneinstellungen« namentlich die gewünschte Animation
(z.B. animate__slideInRight) als CSS-Klasse definieren. Damit die Animation auch sofort ausgeführt wird benötigt es außerdem die Angabe von animate__animated.

Eine entsprechende Contao Erweiterung wäre: hypergalaktisch/contao-animate


Animation abhängig vom Browser Viewport

Wenn du Animationen über »keyframes« oder ein »Framework« setzt, werden diese u. U. sofort ausgeführt. Dies ist nicht hilfreich,
sollte der entsprechende Bereich beim Seitenaufruf nicht augenblicklich sichtbar sein.
Abhilfe schaffen JavaScript Lösungen wie z. B. »wow.js« oder »waypoint.js«.

Diese beobachten permanent den aktuellen Browser Viewport und ermöglichen dir, z. B. entsprechende CSS-Klassen zeitnah zu setzen.
Damit starten deine Animationenen erst, sobald der Bereich im Browser auch tatsächlich sichtbar wird. Mit Contao kannst du diese JavaScript Lösungen manuell einbinden
oder entsprechende Erweiterungen (inspiredminds/contao-wowjs) installieren.

Hinweis:
Falls die obigen JavaScript Frameworks zu aufwendig erscheinen, kannst du hierzu auch die »Intersection Observer API« nutzen.
Eine praktische Anwendung findest du z. B. in der Contao Erweiterung contao-inviewport-bundle.

[Franko]

FYI:
Anwender können in einigen OS oder im Browser (z.B. in Chrome ab 74) eine "prefers-reduced-motion" Präferenz aktivieren.

Chris Coyier beschreibt hier Vor- und Nachteile bzw. wie man über media queries darauf reagieren könnte (zumindest für reine CSS Animationen).