CSS Transition Fade Direction

Question

我正在搞乱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;
}

提前谢谢。

Answer 1

CSS没有提供任何方法来定义每个字符的规则，如果我正确理解你，你需要这些规则。我能想到的最好的方法是写一个javascript，它通过一个给定的文本字符串并包裹一个span中的每个字符然后为每个字符分配越来越多的延迟时间，以便它们很好地动画。幸运的是，我以前做过这个！

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

这绝不是完美的，我不是为webkit设置前缀值，但希望它能让你开始。

Answer 2

我将把我的评论作为答案，因为他的问题已经解决了。

CSS fade left to right