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

Question

[Genri_Rus]

Как в этом примере: https://codepen.io/Genri_Rus/pen/ZEzPwbG

Чтобы при наведении градиент плавно исчезал ?

Answer 1

[Rustam Bainazarov]

background-image в чистом виде (картинка) не анимируемое свойство, градиент — на данный момент это картинка, просто отрендеренная браузером из параметров свойства.

Поэтому opacity для блока.


ease у transition-timing-function указывать бессмысленно, ибо это и есть его стандартное значение (если, конечно, вы его не хотите перезадать).

background — это сборное свойство, которое состоит из background-image, background-size, background-repeat, background-position, background-color, background-attachment и background-clip — поэтому почитайте, что вы можете из этого анимировать и каким способом.

Свойство none просто отключает любое свойство (даже анимируемое), что не позволяет переходу свершиться, даже если он возможен.

Comments

[Genri_Rus]

Спасибо )

[Genri_Rus]

А как во втором случае сделать плавный переход ?

https://codepen.io/Genri_Rus/pen/ZEzPwbG