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

Я пытаюсь изменить цвет фона элемента при наведении, используя 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;

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

Ответ 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/

Ответ 2

Расширение ответа @Sampson, где я рассмотрю более понятные значения, которые легче понять:

.box {
  width: 100px;
  height: 100px;
  display:inline-block;
  background-size: 200% 200%;
  transition: background-position 1s;
}

.to-top{
  background-image: linear-gradient(to top, red 50%, black 0);
  background-position: top;
}

.to-top:hover {
  background-position: bottom;
}

.to-bottom{
  background-image: linear-gradient(to bottom, red 50%, black 0);
  background-position: bottom;
}

.to-bottom:hover {
  background-position: top;
}

.to-left{
  background-image: linear-gradient(to left, red 50%, black 0);
  background-position: left;
}

.to-left:hover {
  background-position: right;
}

.to-right{
  background-image: linear-gradient(to right, red 50%, black 0);
  background-position: right;
}

.to-right:hover {
  background-position: left;
}

<div class="box to-top"></div>

<div class="box to-bottom"></div>

<div class="box to-left"></div>

<div class="box to-right"></div>