Working with prefers-reduced-motion


by Jeremy Caudle
code

Having never worked with prefers-reduce-motion before, I wanted to make sure I familiarized myself with it. That way I can make safer versions of webpages with heavily animated elements.

Warning: This post contains an animation that may be problematic for some readers. Please turn on your reduce motion settings within your operating system or browser before proceeding if you feel like strong animations may be disorienting or potentially harmful.

View the code:

HTML and JS 
<section class="code-block">
            <p class="notice"><strong>Warning:</strong> This post contains an animation that may be problematic for some readers. Please turn on your reduce motion settings within your operating system or browser before proceeding if you feel like strong animations may be disorienting or potentially harmful.</p>
            <button>Click Me</button>
        </section>
CSS 
@keyframes pulse {
                0% {transform: scale(1);}
                50% {transform: scale(1.25);}
                100% {transform: scale(.95);}
            }

            @keyframes colorpulse {
                0% {background-color: red;}
                50% {background-color: rgb(255, 60, 0);}
                100% {transform: rgb(255, 10, 10);}
            }


            section.code-block { 
                font-family: Verdana, Geneva, Tahoma, sans-serif;
                z-index: 1;
                padding: 1rem;
                margin: 3rem auto;
                width: clamp(16em, 90vw, 60em);
                background-color: rgb(250,250,250);
            }

            .notice {
                background-color: rgb(255, 230, 91);
                padding: 1rem;
                margin: 1rem auto 100vh auto;
            }

            section.code-block button {
                display: block;
                cursor: pointer;
                margin: auto auto 3rem auto;
                border: none;
                border-radius: 1rem;
                padding: 1rem;
                background-color: red;
                font-size: 1rem;
                animation-name: pulse;
                animation-delay: 0;
                animation-timing-function: ease-in-out;
                animation-duration: .5s;
                animation-iteration-count: infinite;
            }

            @media (prefers-reduced-motion: reduce) {
                section.code-block button {
                    animation-name: colorpulse;
                    animation-duration: 2s;
                }
            }

Tags