I built a website with many CSS3 animations and transitions. When users visit my site on older or slower devices, these animations become choppy and create a poor browsing experience. The lag makes the site feel broken and unprofessional.
I want to find a method to identify when a device cannot handle smooth animations so I can disable them automatically. However, I prefer not to use JavaScript for this detection if possible. Are there any CSS-only solutions or other approaches that can help me determine when a computer or mobile device is struggling with performance? I need something that works reliably across different browsers and devices.
honestly, use will-change sparingly and try the transform3d(0,0,0) hack to force hardware accelaration. also consider @supports queries to check if the browser can handle newer CSS features before applying heavy animations. works pretty well in my experience.
For slow devices dealing with animations, employ the CSS prefers-reduced-motion media query. This is particularly beneficial as users who enable this setting might be on slower devices or simply prefer better performance. You should wrap your animations in @media (prefers-reduced-motion: no-preference) and provide simpler alternatives for those with reduced motion. Additionally, utilizing the update media query can help target devices with lower refresh rates, which is useful for e-ink screens or older phones that struggle with smooth animations.
The @media (hover: none) query works really well for this. Most touch devices without hover are mobile phones with weaker processors than desktops. I’ve used this on several client projects - animations only run on devices that support hover, which cuts out most slower mobile devices. You can combine it with @media (pointer: coarse) to target touch devices even better. It’s not perfect, but it catches most devices that struggle with heavy animations without needing JavaScript. Mobile performance improved noticeably in my tests.