How to use CSS animations to improve 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.

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 to user when an action has taken place.

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.