CSS3 transition not working

Question

I couldn’t get the clicks to work on this page , does anyone know 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

The 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 call this animation with action.

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

Also check browser support, and if you still have problems with what you are trying to do! Check out css-overrides in your stylesheet and also check behavior: ***.htc css hacks .. maybe something redefines your transition!

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

Answer 2

For me, this is display: none;

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

Removing and using opacity instead solved the problem.

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

Answer 3

This is what you need:

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

Answer 4

A general answer to a general question ... Transitions cannot animate properties that are automatic. If the transition does not work, make sure that the initial value of the property is set explicitly. (For example, to make a node collapsed when its height is auto and should remain the same, set the transition to max-height instead. Give max-height a reasonable initial value, and then translate it to 0)

Answer 5

If you have <script> anywhere on your page (even in HTML, even if it is an empty tag with src ), then the transition should be triggered by some event (it will not fire automatically when the page loads).

Answer 6

HTML:

 <div class="foo"> /* whatever is required */ </div> 

CSS:

 .foo { top: 0; transition: top ease 0.5s; } .foo:hover{ top: -10px; } 

This is just a basic transition to make it easier to place a 10px div tag on hover. The values ​​of transition properties can be edited along with the class.hover properties to determine how the transition works.