Myujth

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 */

Transition is more like an animation.

div.sicon a 
 background:-moz-radial-gradient(left, #ffffff 24%, #cba334 88%);
 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 */

So you need to invoke that animation with an action.

div.sicon a:hover 
 background:-moz-radial-gradient(left, #cba334 24%, #ffffff 88%);

Also check for browser support and if you still have some problem with whatever you're trying to do! Check css-overrides in your stylesheet and also check out for behavior: ***.htc css hacks.. there may be something overriding your transition!

You should check this out: http://www.w3schools.com/css/css3_transitions.asp

Is this what you need:

http://jsfiddle.net/vSUQP/16/

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;