Toggle navigation
☰
HTML
CSS
Scripting
Database
<!doctype html> <title>Example</title> <style> .spinning-box { width: 100px; height: 100px; background-color: mediumseagreen; animation: spin 3s linear infinite; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Detect user preference for reduced motion */ @media (prefers-reduced-motion: reduce) { .spinning-box { /* Completely remove the animation */ animation: none; /* Or, slow it down drastically */ /* animation-duration: 30s; */ } } </style> <div class="spinning-box"></div> <p>If you have "Reduce Motion" enabled in your OS settings, this box will not spin.</p>
