Есть ли способ плавно анимировать цвет текста при наведении?

Question

Дизайн, с которым я работаю, включает в себя кнопку наведения, которая заполняет кнопку цветом. Над этим текст, который в начальном состоянии имеет тот же цвет, что и заполнение. По мере продолжения заливки цвет текста изменяется на контрастный цвет, но плавно. Вот еще из видео дизайнер дал мне, что иллюстрирует проблему:

Вы можете увидеть на букву «а», что это два разных цвета. Поэтому я не могу изменить цвет текста по буквам.

Есть ли какой-либо метод (JS/JQuery/что-то/CSS) для достижения этого? Я не думаю, но, может быть, есть какой-то способ оживить резкий градиент по тексту? Я не знаю.

Answer 1

Я на самом деле сделал что-то подобное для другого вопроса некоторое время назад.

Этого можно достичь с помощью mix-blend-mode. Я также замедлил время до 5s, чтобы вы могли четко видеть, как это работает. Измените это на 0.25s или независимо от ваших потребностей при использовании.

a { 
 
    position: relative; 
 
    text-decoration: none; 
 
    display: inline-block; 
 
    padding: 15px 30px; 
 
    border: 3px solid #f16251; 
 
    background: white; 
 
    color: black; 
 
    font-size: 30px; 
 
    font-family: arial; 
 
    mix-blend-mode: normal; 
 
    overflow:hidden; 
 
    z-index: 1; 
 
} 
 

 
a:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; bottom: 0; right: 0; 
 
    width: 100%; height: 100%; 
 
    background: white; 
 
    mix-blend-mode: difference; 
 
    transform-origin:0 0 ; 
 
    transform:translateX(100%); 
 
    transition: transform 5s; 
 
    z-index: 3; 
 
} 
 
a:hover:before { 
 
    transform: translateX(0); 
 
} 
 

 
a:after{ 
 
    content: ''; 
 
    display:block; 
 
    top: 0; 
 
    left:0; 
 
    bottom:0; 
 
    right:0; 
 
    position: absolute; 
 
    z-index: 100; 
 
    background: #f16251; 
 
    mix-blend-mode: screen; 
 
}

<a href="#" class="btn">WoOoOoOoT</a>