Заполнить цвет фона слева направо CSS

Ответ 1

То, что вам нужно сделать здесь, это использовать линейный градиент в качестве фона и оживить положение фона. В коде:

Используйте линейный градиент (50% красный, 50% синий) и скажите обозревателю, что фон в 2 раза больше ширины элит (ширина: 200%, высота: 100%), а затем скажите, чтобы он оставил фоновый левый.

background: linear-gradient(to right, red 50%, blue 50%);
background-size: 200% 100%;
background-position:left bottom;

В режиме наведения измените положение фона на right bottom и transition:all 2s ease;, положение изменится постепенно (это лучше с linear hard)   background-position: right bottom;

http://jsfiddle.net/75Umu/3/

Что касается префикса -vendor-prefix'es, см. комментарии к вашему вопросу

дополнительная если вы хотите иметь "переход" в цвете, вы можете сделать его шириной 300% и начать переход на 34% (чуть больше 1/3) и заканчиваться на 65% (бит меньше 2/3).

background: linear-gradient(to right, red 34%, blue 65%);
background-size: 300% 100%;

Ответ 2

Один код css при наведении может сделать трюк: box-shadow: inset 100px 0 0 0 #e0e0e0;

В моей скрипке можно найти полную демонстрацию:

https://jsfiddle.net/shuvamallick/3o0h5oka/

Ответ 3

Если вы похожи на меня и вам нужно изменить цвет самого текста, в то же время, заполняя цвет фона, проверьте мое решение.

Шаги для создания:

• У вас есть два текста: один - статический цвет в цвете при наведении, а другой - в цвет состояния по умолчанию, который вы будете перемещать по ходу.
• При наведении перемещать обертку нестатического текста, в то же время перемещая внутренний текст этой обертки в противоположном направлении.
• Обязательно добавьте переполнение, если необходимо,

Хорошо, что это решение:

• Поддержка IE9, использует только преобразование Кнопка
• (или элемент, который вы применяете анимацию) имеет ширину потока, поэтому здесь не используются фиксированные значения.

Не так хорошо в этом решении:

• Действительно беспорядочная разметка, может быть решена с помощью псевдо элементов и att (данных)?
• Есть несколько небольших сбоев в анимации при наличии более одной кнопки рядом друг с другом, возможно, ее можно легко решить, но я не потратил много времени, чтобы исследовать ее.

Проверьте ручку --- > https://codepen.io/nikolamitic/pen/vpNoNq

<button class="btn btn--animation-from-right">
  <span class="btn__text-static">Cover left</span>
  <div class="btn__text-dynamic">
    <span class="btn__text-dynamic-inner">Cover left</span>
  </div>
</button>

.btn {
  padding: 10px 20px;
  position: relative;

  border: 2px solid #222;
  color: #fff;
  background-color: #222;
  position: relative;

  overflow: hidden;
  cursor: pointer;

  text-transform: uppercase;
  font-family: monospace;
  letter-spacing: -1px;

  [class^="btn__text"] {
    font-size: 24px;
  }

  .btn__text-dynamic,
  .btn__text-dynamic-inner {    
    display: flex;
    justify-content: center;
    align-items: center;

    position: absolute;
    top:0;
    left:0;
    right:0;
    bottom:0;
    z-index: 2;

    transition: all ease 0.5s;
  }

  .btn__text-dynamic {
    background-color: #fff;
    color: #222;

    overflow: hidden;
  }

  &:hover {
    .btn__text-dynamic {
      transform: translateX(-100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(100%);
    }
  }
}

.btn--animation-from-right {
    &:hover {
    .btn__text-dynamic {
      transform: translateX(100%);
    }
    .btn__text-dynamic-inner {
      transform: translateX(-100%);
    }
  }
}

Вы можете удалить модификатор .btn - animation-from-right, если хотите анимировать слева.