Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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.

share|improve this question
    
It's hard to say in general. What is your specific case? –  agib Jul 20 '12 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 Jul 20 '12 at 21:49
    
I want to know if animations on a hover will decrease usability compared to instant effects. –  JoJo Jul 28 '12 at 8:07

2 Answers 2

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.

share|improve this answer

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.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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