问题
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.
回答1:
I will put my comment as a answer since his problems is solved.
CSS fade left to right
回答2:
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.
来源：https://stackoverflow.com/questions/16700091/css-transition-fade-direction