旋轉漸變

Question

我使用Animating a CSS gradient background on the hover event以下的代碼，這太棒了。但是，我希望漸變從左到右。

.gradient { 
    background: -webkit-linear-gradient(lightgray,white); 
    background: -moz-linear-gradient(lightgray,white); 
    background: -o-linear-gradient(lightgray,white); 
    background: linear-gradient(lightgray,white); 
    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 
    -moz-background-size: 1px 200px; 
    -o-background-size: 1px 200px; 
    -webkit-background-size: 1px 200px; 
    background-size: 1px 200px; 
    cursor: pointer; 
} 

.gradient:Hover { 
    background-position: 100px; 
} 

我嘗試添加左和與背景圖像替換背景這裏討論：http://www.webdirections.org/blog/css3-linear-gradients/

.gradient { 
    background: -webkit-linear-gradient(left, lightgray,white); 
    background: -moz-linear-gradient(left, lightgray,white); 
    background: -o-linear-gradient(left, lightgray,white); 
    background: linear-gradient(left, lightgray,white); 
    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 
    -moz-background-size: 1px 200px; 
    -o-background-size: 1px 200px; 
    -webkit-background-size: 1px 200px; 
    background-size: 1px 200px; 
    cursor: pointer; 
} 

.gradient:Hover { 
    background-position: 100px; 
} 

仍然沒有骰子。

Answer 1

你的問題是與背景大小，如果我理解確定你想有錯誤的尺寸

.gradient { 
    background: -webkit-linear-gradient(left, lightgray,white); 
    background: -moz-linear-gradient(left, lightgray,white); 
    background: -o-linear-gradient(left, lightgray,white); 
    background: linear-gradient(left, lightgray,white); 
    -webkit-transition: background 1s ease-out; 
    -moz-transition: background 1s ease-out; 
    -o-transition: background 1s ease-out; 
    transition: background 1s ease-out; 
    -moz-background-size: 200px 1px; 
    -o-background-size: 200px 1px; 
    -webkit-background-size: 200px 1px; 
    background-size: 200px 1px; 
    cursor: pointer; 
} 

什麼demo

想到它的尺寸是預定的，所以你的類是不可重用。你可以使它獨立解決，它的工作方式更容易理解。只是改變背景6e到

background-size: 200% 100%; 

好吧，y維度是不相關的，但它設置爲100％更清晰。 和懸停

.gradient:hover { 
    background-position: 100%; 
} 

updated demo with 2 sizes