CSS過渡，爲什麼這不起作用？

Question

@mixin yellow-button($from, $to) { 
    font-size: 16px; 
    color: white; 
    font-weight: bold; 

    /*Button initial state */ 

    background-color: $from; 
    background-image: -webkit-gradient(linear, left top, left bottom, from($from), to($to)); 
    background-image: -webkit-linear-gradient(top, $from, $to); 
    background-image: -moz-linear-gradient(top, $from, $to); 
    background-image:  -o-linear-gradient(top, $from, $to); 
    background-image:   linear-gradient(to bottom, $from, $to); 

    -webkit-border-radius: 9px; 
    -moz-border-radius: 9px; 
    border-radius: 9px; 

    border : 1px solid $light-grey; 
    padding: 0.02em 1em 0.15em 1em; 

    /* Transition here */ 

    -webkit-transition: all 0.2s ease-out; 
    -o-transition: all 0.2s ease-out; 
    transition: all 0.2s ease-out; 

    /* hover state, using SaSS */ 

    &:hover { 
     background-color: $from; 
     background-image: -webkit-gradient(linear, left top, left bottom, from($from), to(darken($to, 10%))); 
     background-image: -webkit-linear-gradient(top, $from, darken($to, 10%)); 
     background-image: -moz-linear-gradient(top, $from, darken($to, 10%)); 
     background-image:  -o-linear-gradient(top, $from, darken($to, 10%)); 
     background-image:   linear-gradient(to bottom, $from, darken($to, 10%)); 
    } 
} 

Answer 1

作爲轉換不支持漸變。也許你可以試試這個http://sapphion.com/2011/10/css3-gradient-transition-with-background-position/