---
title: "Webanimationen mit Drupal: Performance und Barrierefreiheit"
lang: de
type: knowledge
canonical: https://www.arocom.de/wissen/drupal/animation
alternate: https://www.arocom.de/en/knowledge/drupal/animation
author: "Axel Roth"
last_updated: 2026-10-31
---

# Webanimationen mit Drupal: Performance und Barrierefreiheit

Animationen im Web erzeugen Bewegung durch schnelles Abspielen von
Einzelbildern oder CSS-/JavaScript-Transitions. Richtig eingesetzt
verbessern sie die User Experience. Falsch eingesetzt schaden sie
Performance und Barrierefreiheit. arocom setzt seit 2012 auf
durchdachte Animationskonzepte in Drupal-Projekten, die
prefers-reduced-motion respektieren und Core Web Vitals nicht
beeinträchtigen.

## Webanimationen mit Drupal: Performance und Barrierefreiheit

Eine Animation entsteht, wenn Einzelbilder mit mindestens 24 Bildern
pro Sekunde abgespielt werden und so eine flüssige Bewegung erzeugen.
Im Web funktioniert das Prinzip über CSS-Transitions,
JavaScript-Animationen oder das Web Animations API.

Der Einsatzzweck geht weit über Dekoration hinaus: Micro-Interactions
geben Nutzern Feedback, Scroll-Animationen lenken den Blick, und
animierte Datenvisualisierungen machen komplexe Zusammenhänge
greifbar.

## Warum Animationen eure Performance gefährden können

Jede Animation kostet Rechenleistung. CSS-Animationen auf
transform und opacity sind GPU-beschleunigt und performant.
Animationen auf width, height oder top erzwingen
Layout-Neuberechnungen und blockieren den Main Thread.

In Drupal-Projekten setzen wir auf drei Prinzipien: Nur
GPU-freundliche Properties animieren, Animationen per
Intersection Observer erst bei Sichtbarkeit starten, und
prefers-reduced-motion konsequent respektieren.

## Animationen und Barrierefreiheit

WCAG 2.1 verlangt, dass Nutzer Animationen stoppen, pausieren
oder ausblenden können (Erfolgskriterium 2.3.1). Das ist
keine optionale Empfehlung, sondern ab Juni 2025 durch das
Barrierefreiheitsstärkungsgesetz (BFSG) für viele digitale
Angebote verpflichtend.

Drupal unterstützt das über die Media Query
prefers-reduced-motion. Themes und Module, die arocom
entwickelt, respektieren diese Einstellung standardmäßig.

## Animationen in eurem Drupal-Projekt?

Findet heraus, ob eure Animationen Performance und
Barrierefreiheit erfüllen, mit dem
[Zukunfts-Check](https://www.arocom.de/zukunfts-check).

**Aus arocom-Projekten:**

- [Aventerra](https://www.arocom.de/referenzen/aventerra) haben wir seit 2012 von Drupal 6 schrittweise auf Drupal 11 gebracht, 5 Major-Versionen über mehr als ein Jahrzehnt, ohne dass die Plattform je länger als einen Tag offline war.
- Beim [CJD](https://www.arocom.de/referenzen/cjd) (NGO mit ~11.000 Mitarbeitenden) haben wir die Plattform mit 21TORR relauncht und WCAG 2.1 AA durchgezogen. Der Drupal-9-Relaunch wurde bei den Splash Awards 2023 Zweiter in der Kategorie Social/Community, inzwischen läuft die Plattform auf Drupal 11.

### Welche Animationen sind performant?

CSS-Animationen auf transform und opacity sind GPU-beschleunigt und beeinträchtigen die Core Web Vitals nicht. JavaScript-basierte Animationen auf Layout-Properties wie width oder top sind dagegen teuer und blockieren den Rendering-Prozess.

### Unterstützt Drupal prefers-reduced-motion?

Drupal selbst liefert keine Animationen aus. Die Verantwortung liegt beim Theme und den eingesetzten Modulen. arocom achtet in allen Projekten darauf, dass prefers-reduced-motion respektiert wird.

## Weiterlesen

- [WCAG 2.1 erklärt](https://www.arocom.de/wissen/drupal/wcag): Der Accessibility-Standard
- [Barrierefreiheit](https://www.arocom.de/barrierefreiheit): Unsere Leistungen
- [Zukunfts-Check (Audit)](https://www.arocom.de/zukunfts-check): Unabhängige Analyse