Как сделать плавный переход градиента?

Question

[DimaTrust]

Не получается сделать плавный переход между цветами. Получается мигалка какая-та

CSS
.line{
width: 100%;
height: 20px;
bottom: 0;
background-image: linear-gradient(45deg,red,green);
animation-name: grid;
animation-timing-function: linear;
animation-duration: 5s;
animation-iteration-count: 4;
}

@keyframes grid {
0%{background-image: linear-gradient(45deg,red,green)}
50%{background-image: linear-gradient(45deg,green,red)}
100%{background-image: linear-gradient(45deg,red,green)}
}

Comments

[Андрей]

transition можно попробовать

[DimaTrust]

Андрей, не помогло. Также осталось

[Андрей]

залейте на https://codepen.io/SelenIT/pen/EKbRVL

Answer 1

[Ivan Bogachev]

Градиенты нельзя анимировать в рамках CSS "в лоб". Но можно сделать несколько элементов с разными градиентами друг над другом и менять им прозрачность:

Comments

[DimaTrust]

Спасибо за ответ. Но почему то в Internet Explorer метод "В лоб " работает а в других браузерах нет

[Ivan Bogachev]

DimaTrust, Кроссбраузерность - дело такое. На самом деле и в других браузерах (некоторых) он может работать при стечении определенных условий/ограничений, но лучше сразу приучить себя делать надежно в 100% случаев.

[Stalker_RED]

DimaTrust, потому что по стандарту оно не должно анимироваться. Если какаой-то браузер добавляет что-то нестандартное, оно не сразу появляется в других браузерах. А многие штуки так и остаются на уровне экспериментов.

[DimaTrust]

Спасибо вам за ответы я понял что так как я хочу не сделать поэтому лучше удалю эту часть с проекта

Answer 2

[Stalker_RED]

Вот список свойств, которые можно анимировать, и background-image среди них нет. Т.е. оно меняется, конечно, но плавности не ждите.

Варианты обхода:
Можно сделать градиентную подложку бОльшего размера и плавно ее сдвигать.
Можно сделать несколько слоев подложки и менять им прозрачность.

Answer 3

[AlexandrZP]

Не понятно в чём проблема, вот простой код

background: linear-gradient(to right, #2f2f2f, #615f5f);

Comments

[DimaTrust]

Мне нужно что бы этот градиент плавно менял цвета

[AlexandrZP]

DimaTrust, анимация в смысле, или что? то что я представил, как раз плавное перетекает из одного цвета в другой. Анимацию классно показал Ivan Bogachev

[DimaTrust]

AlexandrZP, Мне нужна анимация переливания одного цвета в другой и наоборот