prefers-reduced-motion und animate.css

Update: Kurz nach der Veröffentlichung dieses Artikels wurde animate.css ebenfalls geupdatet und nun gibt es das media-query.

animate.css ist eine nicht mehr wegzudenkende CSS3 Animationsbibliothek von Daniel Eden, die wahrscheinlich jeder Web-Entwickler schon einmal in einem Projekt verwendet hat.

2017 wurde das media-query „prefers-reduced-motion“ in CSS3 eingeführt, welches erst seit ~2019 oder später Einzug in die meisten Browser fand.

Data on support for the prefers-reduced-motion feature across the major browsers from caniuse.com

In MacOS zum Beispiel findet man die Einstellung „Bewegung reduzieren“ in den Bedienungshilfen, ebenso bei iOS. In Android heißt das ganze etwas drastischer „Animationen entfernen“ und unter Windows 10 findet man diese Einstellung bei Einstellungen > Erleichterte Bedienung > Anzeige > Animationen in Windows anzeigen.

Nun passen dieses neue media-query und animate.css leider gar nicht gut zusammen und bisher gibt es auch keine Implementation von prefers-reduced-motion in animate.css.

Dies ist aber ganz einfach umzusetzen. Schreibt einfach folgendes in die animate.css-Datei, einen Inline-Style oder eine andere .css in eurem Dokument:

@media(prefers-reduced-motion: reduce){
    .animate__animated {
    	-webkit-animation-duration: 1 ms!important;
        animation-duration: 1 ms!important; 
        -webkit-transition-duration: 1 ms!important;
        transition-duration: 1 ms!important; 
        -webkit-animation-iteration-count: 1!important;
        animation-iteration-count: 1!important 
    }
}