ホバー上のテキストの色を滑らかにアニメーション表示する方法はありますか？

Question

私がデザインしているのは、ボタンを色で塗りつぶすボタンホバーです。これ以上のテキストは、初期状態では塗りと同じ色です。塗りが進むにつれて、テキストの色は対照的な色に変化しますが、スムーズに変化します。ここでは、設計者が問題を示していることを私に与えた映像のままです：

あなたはそれが2つの異なる色である「」という文字で見ることができます。だから私は文字の色を変更することはできません。

これを達成するための方法（JS/Jquery/whatever/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>