CSS从左到右淡出

有没有办法只使用CSS淡入淡出元素（至少只是文本）从左到右，反之亦然？

这是我的意思的一个例子：

实际上，如果它需要jQuery，我也会接受它，作为第二优先级。

Answer 1

是的，您可以使用CSS3动画（ 请在此处查看浏览器支持 ）。

这是一个简单的文本淡化演示 。

HTML：

 There is some text here! 
 
​ 

CSS：

 .text { position:relative; line-height:2em; overflow:hidden; } .fadingEffect { position:absolute; top:0; bottom:0; right:0; width:100%; background:white; -moz-animation: showHide 5s ease-in alternate infinite; /* Firefox */ -webkit-animation: showHide 5s ease-in alternate infinite; /* Safari and Chrome */ -ms-animation: showHide 5s ease-in alternate infinite; /* IE10 */ -o-animation: showHide 5s ease-in alternate infinite; /* Opera */ animation: showHide 5s ease-in alternate infinite; } @-webkit-keyframes showHide { /* Chrome, Safari */ 0% {width:100%} 40% {width:0%} 60% {width:0%;} 100% {width:100%;} } @-moz-keyframes showHide { /* FF */ 0% {width:100%} 40% {width:0%} 60% {width:0%;} 100% {width:100%;} } @-ms-keyframes showHide { /* IE10 */ 0% {width:100%} 40% {width:0%} 60% {width:0%;} 100% {width:100%;} } @-o-keyframes showHide { /* Opera */ 0% {width:100%} 40% {width:0%} 60% {width:0%;} 100% {width:100%;} } @keyframes showHide { 0% {width:100%} 40% {width:0%} 60% {width:0%;} 100% {width:100%;} } 

正如您所看到的，边界上形成了鲜明的对比。 如果使用图像渐变而不是纯白色背景，它将呈现更好的效果。

然后，您可以使用IE9及更低版本的jQuery后备。

Answer 2

在Photoshop或其他图像编辑软件中，创建一个中间透明的圆形区域，并在所有侧面淡出为纯白色。 您可以根据需要自由裁剪顶部/底部。 然后，您可以使用css过渡从左到右为图形设置动画，以在演示中实现效果。 对于不支持转换的IE等浏览器，请使用jquery中的cssHooksfunction来使用jQuery执行动画。

您可以使用css渐变创建此效果，但是您遇到浏览器支持问题，并且在性能方面使用css渐变的转换是非常糟糕的。 但是，简单地设置png24的动画非常容易，并且效果相同。