We are all probably familiar with the use of animation in very specific scenarios when it comes to display of system states such as the loading animation.

However, the recent trend of animation in icons (in particular pure CSS types) has introduced a new level of interaction with end users.

I am interested to know if these icons are designed to be aesthetically pleasing (and focusing on the general user experience) or if people have seen good examples of functional animations applied to icons that have a specific feature that assists with usability or ease-of-use or accessibility?

Some examples of animation in buttons: https://www.w3schools.com/howto/howto_css_loading_buttons.asp

  • 1
    Any reference examples?
    – user68158
    Commented Sep 4, 2018 at 11:45
  • @Levano I have updated the question with a link that has examples :)
    – Michael Lai
    Commented Sep 5, 2018 at 2:30

1 Answer 1


I've found that these animations can be quite good for expressing state changes in dual state buttons.

A little example I made is an add button transforming to a delete button. Codepen css animation (i hope the image loads, if not just check the url in the html code and load it in a new tab then refresh the pen).

The animation demonstrates better to the user the mode/action you're acting in/performing.

It gives the user a clear indication of the state they are in the state they have transitioned to and the animation itself confirms that the system has worked to move into the new state.

  • +1 Nice use case - would be good to see some examples :)
    – Michael Lai
    Commented Sep 6, 2018 at 0:15

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.