Плавная анимация градиента при наведении

#css #html5 #css3 #css_animation

div {
  width: 100px;
  height: 30px;
  background: linear-gradient(90deg, red, green);
  transition: background 1s;
}

div:hover {
  background: red;
  transition: background 1s;
}





Как реализовать плавную заливку градиента в 1 цвет (красный) при наведении?
    

Ответы

Ответ 1

div {
  position: relative;
  width: 100px;
  height: 30px;
  background: linear-gradient(90deg, red, green);
}
div:before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: red;
  opacity: 0;
  transition: 0.3s;
}
div:hover:before {
  opacity: 1;
}



Ответ 2

При переходах и анимациях, лучше использовать конкретные единицы и значения с помощью
rgb[a](R,G,B[,A]) или hsl[a](H,S,L[,A]), а не ключевые слова (red, green и тп.). Также
рекомендую воздержаться от использования #RGB и #RRGGBB в переходах и анимациях.

Т.к. linear-gradient плохо поддаётся анимации, то в данном случае, проще анимировать
не сам градиент, а "подложку" под ним:



div {
  width: 100px;
  height: 30px;
  background: linear-gradient(90deg, rgb(255, 0, 0), rgba(255, 0, 0, 0)), rgb(0,
128, 0);
  transition: background 1s;
}

div:hover {
  background: linear-gradient(90deg, rgb(255, 0, 0), rgba(255, 0, 0, 0)), rgb(255,
0, 0);
  transition: background 1s;
}