I've been experimenting with CSS transitions and I'm struggling to achieve the desired effect.
My concept was to have text that blends in with the background color, essentially making it invisible. Then, I planned to position an image over the text and use a translation to move the image from left to right. I intended to synchronize the transitions so that as the image passed over each character in the text, that specific character would fade in. This would create the illusion that the image was gradually "uncovering" the text.
The image translates smoothly, and the text does indeed fade in. However, the issue is the text fades in all at once. Is there a way to make the text transition from left to right?
If achieving this effect using only CSS is not possible, what additional skills or tools do I need to learn?
EDIT: Including some code below.
Here's the 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;
}
Thank you in advance for your help.