Transizione CSS3 non funzionante

Question

Non sono riuscito a far funzionare le transizioni su this page, qualcuno ha qualche idea del perché?

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

transizione è più simile a un'animazione.

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

Quindi è necessario richiamare quell'animazione con un'azione.

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

Controllare anche il supporto del browser e se si ha ancora qualche problema con quello che si sta tentando di fare! Controlla i css-overrides nel tuo foglio di stile e controlla anche gli hacks dei css behavior: ***.htc .. potrebbe esserci qualcosa che stravolge la tua transizione!

Si dovrebbe verificare: http://www.w3schools.com/css/css3_transitions.asp

Answer 2

E 'questo quello che vi serve:

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