CSS3 Transition not working

Question

I couldn't get transitions to work on this page, anybody has any idea why?

div.sicon a {     transition: background 0.5s linear;     -moz-transition: background 0.5s linear; /* Firefox 4 */     -webkit-transition: background 0.5s linear; /* Safari and Chrome */     -o-transition: background 0.5s linear; /* Opera */     -ms-transition: background 0.5s linear; /* Explorer 10 */ } 

Answer 1

A general answer for a general question... Transitions can't animate properties that are auto. If you have a transition not working, check that the starting value of the property is explicitly set.

Sometimes, you'll want to animate height and width when the starting or finishing value is auto. (For example, to make a div collapse, when it's height is auto and must stay that way.) In this case, put the transition on max-height instead. Give max-height a sensible initial value (bigger than its actual height), then transition it to 0)

Answer 2

For me, it was having display: none;

#spinner-success-text {     display: none;     transition: all 1s ease-in; }  #spinner-success-text.show {     display: block; } 

Removing it, and using opacity instead, fixed the issue.

#spinner-success-text {     opacity: 0;     transition: all 1s ease-in; }  #spinner-success-text.show {     opacity: 1; }