Following best practices for CSS animations can improve a site’s user experience
The Cascading Style Sheet, more commonly known as CSS, not only styles your website in terms of colors, buttons, font selections, but can also help give users feedback and improve their experience on your site. Using a few different techniques you can really improve UX on your site.
CSS animation examples
Hover effects
Different effects for hover to show activeness / CTA yellow shoutout.
Box-shadow
Slightly different than the background the button lays out can add some depth (visually literally) to your site. Shows different states or gives different impressions to the user.
Providing feedback
Providing interface feedback to user when an action has taken place is a best practice.
Click something, so it then changes to show click took place. (Using example below) if you click down on each circle to see its “active state”, you begin to see the pointer is mostly covering up the last circle. This correlates to a user pulling up this example on their phone and trying to click down on the last circle. Without any sort of user feedback, the user wouldn’t know their click was actually doing anything.
As you can see, just a small animation effect can create a better, more delightful user experience. Of course, there are always ways to go overboard with animations (think 90s-era star swipes) so we always recommend keeping animations to a minimal as to not distract your users with lots of bells and whistles which takes focus away from the user flow you have designed and developed your site.
