How to use prefers reduced motion animations control

How to remove animations

To remove animations you need a media query like this:

@media (prefers-reduced-motion) {
    .underlined:before {
        width: 100%;
        animation: none;
        animation-delay: unset;
    }

    .scaled-img {
        filter: none;
        animation: none;
        animation-delay: unset;
    }
}

Test it live on Google Chrome

  1. Open the inspect tool of Google Chrome
  2. CTRL + SHIFT + P
  3. Type for reduce and Click on Emulate CSS prefers-reduced-motion
  4. Do the same process from the opposite to undo this and to return the browser to the normal behaviour