CSS过渡淡入淡出方向[重复]答案

【问题标题】：CSS Transition Fade Direction [duplicate]CSS过渡淡入淡出方向[重复]
【发布时间】：2013-05-23 07:32:58
【问题描述】：

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

提前谢谢你。

【问题讨论】：

请分享一些代码？也许是JSFiddle？
stackoverflow.com/questions/12686738/css-fade-left-to-right
你就是那个人@ViníciusMoraes

标签： css css-transitions

【解决方案1】：

既然他的问题已经解决了，我会把我的评论作为答案。

CSS fade left to right

【讨论】：

应该只是将其标记为重复
不知道怎么做，你能帮我做吗？
我已经做到了。在每个问题和答案下，您都会看到“share|edit|flag”点击标志并从那里开始。

【解决方案2】：

CSS 没有提供任何基于每个字符定义规则的方法，如果我理解正确的话，您会需要这种方法。我能想到的最好方法是编写一个 javascript，它通过给定的文本字符串并将每个字符包装在一个跨度中，然后为每个字符分配过渡样式，并增加延迟时间，以便它们很好地动画化。幸运的是，我以前做过！

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

这绝不是完美的，除了 webkit，我不会为任何东西设置前缀值，但希望它能让你开始。

【讨论】：