从左到右的CSS淡入淡出

有没有一种方法可以淡入淡出元素（至少只是文本）从左到右或反过来只用CSS？从左到右的CSS淡入淡出

这里是我的意思的例子：

enter image description here

其实，如果它需要jQuery的，我会接受，太多，只是作为第二优先。

来源

2012-10-02 Bobe

您可以使用一个额外的图层来保存渐变（从白色到透明）并水平移动该图层以获得所需的效果。 – feeela

@feeela这就是我认为最好的工作方式，但我不确定如何实现上述效果，因为该层只会返回而不是继续沿相同方向移动。 – Bobe

在文字上方放置图层并为渐变添加动画效果？这可以工作，但是从我使用CSS3渐变开始已经很长时间了。 – Zeta

是的，你可以使用CSS3动画（check browser support here）。

这是一个简单的demo for text-fading。

HTML：

<div class="text"> 
There is some text here! 
<div class="fadingEffect"></div> 
</div>

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后备。

来源

2012-10-02 08:49:50 Giona

在photoshop或其他图像编辑软件中，创建一个中间透明的圆形区域，并在所有面上淡出为白色。随意根据需要裁剪顶部/底部。然后，您可以使用css转换从左向右对图形进行动画处理，以在演示中实现效果。对于不支持转换的IE浏览器，请使用jQuery中的cssHooks功能来执行jQuery的动画。

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

来源

2012-10-02 08:41:51 Geuis

从左到右的CSS淡入淡出

回答

相关问题