Переход фонового цвета с помощью слайд-анимации

Question

Я пытаюсь изменить фоновый цвет элемента при наведении с помощью переходов CSS. Я хочу сделать это, прокручивая его снизу. Я могу размытый фон в использовании, но я хотел бы, чтобы скользить вверх:

-webkit-transition: background-color 0.5s linear; 
-moz-transition: background-color 0.5s linear; 
-o-transition: background-color 0.5s linear; 
transition: background-color 0.5s linear; 

один другой мысли, было бы лучше, чтобы прокручивать вверх отдельный элемент с фоном нанесенным на него?

Answer 1

Для слайд цвет фона до вам нужно будет использовать фоновое изображение, или градиент какой-то, постепенно регулируя background-position:

.box { 
    width: 200px; height: 100px; 
    background-size: 100% 200%; 
    background-image: linear-gradient(to bottom, red 50%, black 50%); 
    transition: background-position 1s; 
} 

.box:hover { 
    background-position: 0 -100%; 
} 

Вы можете посмотреть демо здесь: http://jsfiddle.net/as5ZU/