Поворот градиента

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

Просто думать об этом, размеры предопределены, поэтому ваш класс не может использоваться повторно. Вы можете сделать его независимым от разрешения, а способ его работы легче понять. Просто измените фон sixe на

background-size: 200% 100%; 

ну, измерение y не имеет значения, но установка его на 100% яснее. и зависать в

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

updated demo with 2 sizes