Disable existing CSS keyframe animation with additional CSS rules

Question

I'm working on adding support for the prefers-reduced-motion on a very animation-heavy site. Since the feature is opt-in and not well supported right now, I need to have my animations outside a media query and then additional CSS rules to disable the animation inside @media screen and (prefers-reduced-motion: reduce) {}

There are two animations, vertical-animate and horizontal-animate. Both go from 0% straight to 100% changing opacity from 0 to 1 and top/left from 100px to 0px.

Right now, I have the following in an attempt to reset both the keyframes and animation property:

@media screen and (prefers-reduced-motion: reduce) {

    @-webkit-keyframes vertical-animate {}
    @keyframes vertical-animate {}
    @-webkit-keyframes horizontal-animate {}
    @keyframes horizontal-animate {}

    * {
        -webkit-animation: none !important;
        -moz-animation: none !important;
        -o-animation:  none !important;
        animation: none !important;
    }

}

This successfully prevents the animation but it also leaves the animated elements invisible! Using dev tools, I can see they're essentially stuck at opacity: 0 and [top/left]: 100px.

(FWIW, I'm testing without the media query to see the result.)

How can I write additional CSS (as little as possible, please!) that disables an animation so that design appears as it would at the end of the existing completed keyframe animation?

vals vals · Accepted Answer · 2018-01-29T21:11:19

Since you are not posting your complete code, I have to guess what is your code.

I assume that your animations run only once, and that they leave the style afterwards using forwards

So, I believe that setting in your media query style

animation-delay: -99s;

That would make your animations start as if 99 seconds had elapsed and would get you expexted result. Of course, the 99 seconds value is arbitrary, you just need to set it higher that the greatest length of your animations

Disable existing CSS keyframe animation with additional CSS rules

1 Answers