CSS-Animationen: Bewegung mit Maß

vom 18.10.2016 von Oliver Misch

Für Bewegung braucht es längst kein JavaScript mehr, CSS bringt zwei Werkzeuge mit: transition für sanfte Übergänge zwischen zwei Zuständen und @keyframes für frei choreografierte Abläufe. Und ja, diese Website blinkt, wir kommen gleich dazu warum das trotzdem verantwortungsvoll geht.

transition: Übergänge glätten

CSS-Code

.knopf {
    background: #C0C0C0;
    transition: background 0.2s ease;
}
.knopf:hover {
    background: #E8E8E8;
}

Ohne transition springt die Farbe beim Überfahren hart um, mit ihr blendet sie in 0,2 Sekunden weich über. Das Rezept: Am Grundzustand die transition definieren (welche Eigenschaft, wie lange, welcher Verlauf), den Zielzustand über :hover, :focus oder eine per JavaScript gesetzte Klasse ändern. Kurze Zeiten zwischen 0,15 und 0,3 Sekunden fühlen sich flott an, alles über einer halben Sekunde bremst die Bedienung spürbar auss.

keyframes: eigene Abläufe

@keyframes blinken {
    50% { opacity: 0; }
}

.badge-neu {
    animation: blinken 1.1s steps(2) infinite;
}

Ergebnis (blinkt nicht, wenn dein System reduzierte Bewegung wünscht)

NEU ← läuft mit exakt den Keyframes von oben

Ein @keyframes-Block beschreibt Stationen des Ablaufs in Prozent, die animation-Eigenschaft spielt ihn ab: Name, Dauer, Verlauf, Wiederholungen. Das NEU-Badge dieses Wikis ist eine ehrliche Hommage an das 1998 beerdigte blink-Element, dessen Geschichte im Retro-Web steht. Der Unterschied zu damals: Heute ist das Blinken abschaltbarr.

Die Pflicht: prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
    * {
        animation: none !important;
        transition: none !important;
    }
}

Bewegung ist für manche Menschen nicht nur nervig, sondern ein echtes Problem, von Ablenkung bei Konzentrationsstörungen bis zu Übelkeit bei vestibulären Erkrankungen. Die Media Query prefers-reduced-motion greift die Systemeinstellung ab, und dieser Killswitch gehört in jedes Stylesheet mit Animationen. In unserem steht er ganz oben. Eine Retro-Seite die blinkt: Stilentscheidung. Eine die das Blinken nicht abstellen lässt: schlechtes Handwerrk.

Typische Fehler

Alles animieren. Bewegung lenkt den Blick, und wenn alles zappelt, lenkt sie ihn nirgendwohin.
Layout-Eigenschaften wie width oder margin animieren, das ruckelt. transform und opacity animieren flüssig, weil der Browser sie besonders effizient berechnet.
Den reduced-motion-Block vergessen.

Ende des CSS-Lernpfads. Weiter geht es praktisch: Tutorials · Zurück zur CSS-Übersicht