@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)}
}
  • Вопрос задан
  • 98 просмотров
Пригласить эксперта
Ответы на вопрос 3
sfi0zy
@sfi0zy Куратор тега CSS
Creative frontend developer
Градиенты нельзя анимировать в рамках CSS "в лоб". Но можно сделать несколько элементов с разными градиентами друг над другом и менять им прозрачность:

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

Варианты обхода:
Можно сделать градиентную подложку бОльшего размера и плавно ее сдвигать.
Можно сделать несколько слоев подложки и менять им прозрачность.
Ответ написан
@AlexandrZP
Не понятно в чём проблема, вот простой код
background: linear-gradient(to right, #2f2f2f, #615f5f);
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы