Javascript CSS 从左到右淡入淡出
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12686738/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS fade left to right
提问by Bobe
Is there a way to fade elements (at least just text) in and out going left to right or vice-versa using only CSS?
有没有办法只使用 CSS 使元素（至少只是文本）从左到右淡入淡出，反之亦然？
Here is an example of what I mean:
这是我的意思的一个例子：
Actually, if it requires jQuery, I'll accept that too, just as a second priority.
实际上，如果它需要 jQuery，我也会接受，只是作为第二优先事项。
回答by Giona
Yes, you can do it with CSS3 animations (check browser support here).
是的，您可以使用 CSS3 动画来实现（在此处查看浏览器支持）。
Here's a simple demo for text-fading.
这是text-fading的一个简单演示。
HTML:
HTML：
.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%;}
}<div class="text">
There is some text here!
<div class="fadingEffect"></div>
</div>CSS:
CSS：
?As you can see, there's a sharp contrast on the borders. If you use an image gradient instead of a pure white background it will render better.
?正如你所看到的，边界上有一个鲜明的对比。如果您使用图像渐变而不是纯白色背景，它将呈现更好的效果。
Then, you can use a jQuery fallback for IE9 and below.
然后，您可以为 IE9 及更低版本使用 jQuery 回退。
回答by Geuis
In photoshop or other image editing software, create a circular area that is transparent in the middle and on all sides fades out to solid white. Feel free to crop the top/bottom as needed. You can then use css transitions to animate the graphic from left to right to achieve the effect in your demo. For browsers like IE that don't support transitions, use the cssHooks feature in jquery to perform the animations with jQuery.
在 photoshop 或其他图像编辑软件中，创建一个中间透明的圆形区域，四周淡出为纯白色。根据需要随意裁剪顶部/底部。然后，您可以使用 css 过渡从左到右为图形设置动画，以实现演示中的效果。对于 IE 等不支持过渡的浏览器，可以使用 jquery 中的 cssHooks 功能来使用 jQuery 执行动画。
You couldcreate this effect using css gradients, but you run into browser support issues, and using transitions on css gradients is very bad in terms of performance. However, simply animating a png24 is very easy and makes the same effect.
您可以使用 css 渐变创建这种效果，但是您遇到了浏览器支持问题，并且在 css 渐变上使用过渡在性能方面非常糟糕。但是，简单地为 png24 设置动画非常容易并且可以产生相同的效果。
