CSS Transition Fade Direction

Question

I am messing around with CSS transitions and am having difficulty getting the effect I want.

My idea was to have some text be the same color as the background effectively making it invisible, I was then going to position an image over the text, and use a translation to move the image from left to right. I was then going to sync up the transitions so that as the image passed over a character in the text, that character would be fading in. Effectively making it seem as if the image was "uncovering" the text.

The image translates fine, and the text does in fact fade in. It's just that the text fades in all at once. Is it possible to have the text translation fade from left to right?

If this is not possible using just CSS what would I need to learn how to use?

EDIT: adding some code.

Here is 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.

Share some code, please? Perhaps a [JSFiddle](http://jsfiddle.net)? — Derek, May 22 '13 at 19:33
http://stackoverflow.com/questions/12686738/css-fade-left-to-right — Vinícius Moraes, May 22 '13 at 19:35

score 0 · Answer 1 · answered May 22 '13 at 19:40

CSS doesn't offer any way to define rules on a per character basis, which you'd need if I'm understanding you correctly. The best way I can think of would be to write a bit a javascript that goes through a given string of text and wraps each character in a span then assigns transiton styles to each with increasing delay times so that they animate in nicely. Luckily for you I've done this before!

http://dl.dropboxusercontent.com/u/23451438/textfade/index.html

It's by no means perfect, and I'm not setting prefix values for anything but webkit, but hopefully it will get you started.

score 0 · Accepted Answer · edited May 23 '17 at 11:43

0

I will put my comment as a answer since his problems is solved.

CSS fade left to right

edited May 23 '17 at 11:43

Community

1
1

answered May 22 '13 at 23:32

Vinícius Moraes

3,506
2
22
24

1

Should have just flagged it as a duplicate – apaul May 22 '13 at 23:51
1

Didn't know how to do that, can you do it for me ? – Vinícius Moraes May 22 '13 at 23:52
1

I already did. Under every question and answer you'll see "share|edit|flag" hit flag and go from there. – apaul May 22 '13 at 23:54

CSS Transition Fade Direction

2 Answers2

Linked