CSS トランジションをいじっていて、必要な効果を得るのに苦労しています。
私の考えは、テキストを背景と同じ色にして効果的に非表示にすることでした。次に、テキストの上に画像を配置し、翻訳を使用して画像を左から右に移動しました。次に、トランジションを同期して、画像がテキスト内の文字を通過すると、その文字がフェードインするようにしました。効果的に、画像がテキストを「覆い隠している」ように見せます。
画像は問題なく変換され、テキストは実際にフェード インします。テキストが一度にフェード インするだけです。テキストの翻訳を左から右にフェードさせることは可能ですか?
これが CSS だけでは不可能である場合、どのように使用するかを学ぶ必要がありますか?
編集: いくつかのコードを追加します。
ここにCSSがあります
#topbar
{
background-color:#EEEEE0;
background: linear-gradient(to right, #EEEEE0,#EEDC82);
display: block;
width: 100%;
margin-left:250px;
padding: 30px;
border-radius:25px;
}
#headertext
{
color: #EEEEE0;
transition: color 2s ease .1s;
}
#rocket
{
display:block;
position:absolute;
top:55px;
transition: all 3s ease .1s;
}
#topbar:hover #rocket
{
-webkit-transform: translate(800px, 0);
}
#topbar:hover #headertext
{
color:black;
}
前もって感謝します。