スライドアニメーションのテキストの色の変更

Question

ホバーの右から背景色のスライドが入っているボタンがありますが、これはうまくいきますが、変更するにはテキストの色も必要です。私はそれを消滅させることができたが、それは適切に機能しない。私が欲しいのは、バックグラウンドの変更と合わせて右からのカラートランジションスライドです。

.slideybutton { 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, white 50%, blue 50%); 
 
    transition: background-position 1s linear, color 1s linear; 
 
    color: blue; 
 
} 
 
.slideybutton:hover { 
 
    background-position: -100% 0; 
 
    color: white; 
 
}

<a class="slideybutton"> 
 
Lorem ipsum dolor sit amet. 
 
</a>

私はこの質問を見てきましたが、唯一の解決策は、このインスタンスでは実現不可能です。 Sliding in changing text color animation

CSSトリックがありますか？ Googleの検索で正しい方向に私を向けるものがないので、私は不可能にしようとしているのではないかと心配しています。

私はJSまたはjQueryを利用して、自分の望むことが達成できたらうれしいです。

Answer 1

これは、「バックグラウンドでテキストを組み合わせる」ことによって行うことができ、より、キーがプロパティ背景クリップがあり、これをチェックアウト：

.slideybutton { 
 
    background-size: 200% 100%; 
 
    background-image: linear-gradient(to right, blue 50%, white 50%), 
 
        linear-gradient(to right, white 50%, blue 50%); 
 
    transition: background-position 1s linear; 
 
    -webkit-background-clip: text, border-box; 
 
    background-clip: text, border-box; 
 
    color: transparent; 
 

 
} 
 
.slideybutton:hover { 
 
    background-position: -100% 0; 
 
}

<a class="slideybutton"> 
 
Lorem ipsum dolor sit amet. 
 
</a>

Answer 2

私はあなたが現時点で純粋なCSSソリューションを使用してこれをエレガントに行うことはできないと思います。背景フィルタは、達成したいことを期待しているように見えます。要素をゆっくりと背景フィルタにオーバーレイすると、テキストを移動するときにテキストがフィルタに適用されます。

チェックアウトここhttps://webkit.org/demos/backdrop-filter/

Answer 3

擬似要素を使用して代替を提供するだけです。クロムでうまく動作します。

.slideybutton { 
 
    position: relative; 
 
} 
 
.slideybutton:hover { 
 
    /* to fix a bug in IE */ 
 
} 
 
.slideybutton:hover::after { 
 
    width: 100%; 
 
} 
 
.slideybutton::before { 
 
    content: attr(title); 
 
    color: blue; 
 
} 
 
.slideybutton::after { 
 
    content: attr(title); 
 
    position: absolute; 
 
    left: 0; 
 
    width: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    color: white; 
 
    transition: width 1s linear; 
 
    background-color: blue; 
 
    white-space: nowrap; 
 
    overflow: hidden; 
 
}

<a class="slideybutton" title="Lorem ipsum dolor sit amet."> 
 

 
</a>