Не правильно работает transition?

Question

[Артём Цымбалюк]

Здравствуйте.
Есть div, на него повешены hover, active, focus псевдоклассы

При ховере transition: all 1s работает, а если убрать мышку то есть из hover в обычное состояние transition уже не работает, я подозреваю, что проблема с

background-image: linear-gradient(to right, #34a853 0%, #34a880 100%);

Пожалуйста подскажите в чём может быть проблема, как сделать так что бы из hover в обычное состояние transition тоже работал.

Собственно вот сам код - https://jsfiddle.net/drkqjv9p/

Answer 1

[tommy_13]

градиент потому что не работает

Comments

[Артём Цымбалюк]

tommy_13 в коде он работает, а не работает у меня transition. Есть подозрения что из-за градиента. Если есть толковые советы, буду благодарен

[tommy_13]

Артём Цымбалюк: в коде у тебя при ховере, грфдиент выключается (none). дальше работает transition (ты наблюдаешь анимацию). при потере ховера - возвращается градиент и ты не видишь анимацию, потому что градиент перекрывает твой фоновый цвет, который меняется

[vovkka]

Артём Цымбалюк: есть совет чтоб долго не гадать сделать в онлайн генераторе, благо их куча, и потом взглянуть на код и сравнить.

[Ankhena]

Артём Цымбалюк: vovkka:
transition не работает с градиентом

Answer 2

[Ankhena]

transition не работает с градиентом

Решение: накладывать сверху еще один блок или before|after и анимировать прозрачность этого блока.

Comments

[Артём Цымбалюк]

Ankhena W можно пожалуйста примерчик, слабо понимаю как это сделать

[Ankhena]

Артём Цымбалюк: Почему не работает transition для градиента?
там в ответах есть пример