Home
CSS
CSS MQ Examples
Tryit: Respect user preferences
Run ❯
Get your
own
website
❯
Run Code
Ctrl+Alt+R
Save Code
Ctrl+Alt+A
Change Orientation
Ctrl+Alt+O
Change Theme
Ctrl+Alt+D
Go to Spaces
Ctrl+Alt+P
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } div { width: 100px; height: 100px; background-color: red; position: relative; animation-name: example; animation-duration: 4s; } @keyframes example { 0% {background-color:red; left:0px; top:0px;} 25% {background-color:yellow; left:200px; top:0px;} 50% {background-color:blue; left:200px; top:200px;} 75% {background-color:green; left:0px; top:200px;} 100% {background-color:red; left:0px; top:0px;} } </style> </head> <body> <h1>Respect User Preferences</h1> <p>The prefers-reduced-motion media feature checks if a user has asked to reduce motion, such as animations or transitions. Use this feature to turn off animations and transitions for the users who has activated this setting on their computer.</p> <div></div> </body> </html>
