6

What, if any, are the accepted guidelines and/or best practices for using CSS animated transitions on hover in a web-based user interface? When does it start to simply become annoying and distracting?

I've noticed it showing up on some technology related blogs (example - hover over links) and also on Stack Exchange sites in some places (such as the top navigation bar on security.stackexchange.com). It seems to me like it adds a nice touch to the interface. At the same time, I think there's probably a point at which it stops being a good thing and starts to be distracting. And some other high-profile sites, such as other SE sites (this one) and jQuery's site (example: the accordion UI demo) don't use it at all.

Improve this question
4
  • It's hard to say in general. What is your specific case?
    – agib
    Commented Jul 20, 2012 at 21:45
  • I'm generally using them right now in menus, links in the body of the document, and hover animations on items that are in Isotope'd (via isotope).
    – Mr. Jefferson
    Commented Jul 20, 2012 at 21:49
  • I want to know if animations on a hover will decrease usability compared to instant effects.
    – JoJo
    Commented Jul 28, 2012 at 8:07
  • you can choose one best hover effect from hundreds of examples from OnAirCode
    – Pacific P. Regmi
    Commented Aug 7, 2019 at 10:31

3 Answers 3

Reset to default
1

Something to keep in mind for hover design is how it would be handled (or not handled) on mobile devices. With a sharp uptick in the number of mobile web surfers these days, designing sites with mobile in mind is important.

Adding hover purely for aesthetics is probably fine, but if it triggers functionality or navigational menus that you can't access any other way, it might become troublesome.

Improve this answer
0

I feel that browser technology is getting to a point where this is really a judgement call on the developers/designers part. Just a few years ago we were still at the point where adding substantial transitions with JavaScript would add significant bloat and clunkiness to an application, and I would have argued that in general it was a bad idea to have them. However with the widespread support of CSS3 transitions and animations it is relatively "lightweight" to add such effects, and if you can make a case that it adds to the user experience, there is no reason not to do it.

Improve this answer
0

I doubt there are any universal guidelines.

Except maybe this: if the animation helps the user understand what they can do, what will happen, or what just happened, then it will be more useful than one that's unnecessary, just eye candy.

Improve this answer

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.