Как сделать анимированную смену фильтров css?

Question

[Алина Орел]

Здравствуйте! Надо сделать так, чтобы при наведении на изображение его фильтр менялся. Изначально на изображении уже имеется фильтр и при наведении он анимированно transition: all 1s ease-in-out; сменяется на filter: none;
Однако, сейчас это надо заменить на другой фильтр - filter: sepia(40%) brightness(0.55);. При замене none на другое значение фильтра пропадает анимация.
Что можно тут сделать?

Пример: https://codepen.io/Alina_Orel/pen/LwWzLY

Comments

[Алексей Уколов]

Приложите пример кода на codepen или jsfiddle.

[uRoot]

сменяется на filter: none;

Может нужно в другом месте попробовать поменять? :) Приложите пример, так будет понятней

[Алина Орел]

Алексей Уколов, https://codepen.io/Alina_Orel/pen/LwWzLY

Answer 1

[Ivan Bogachev]

Попробуйте использовать одинаковые наборы функций, но с разными значениями:

.filters {
    filter: grayscale(0.85) sepia(0%) brightness(1);
}

.links-item:hover .filters {
    filter: grayscale(0) sepia(40%) brightness(0.55);
}

Comments

[Алина Орел]

Спасибо больше, помогло