CSS从左向右淡出

Question

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

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

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

Answer 1

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

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

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：

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

然后，您可以使用IE9及以下版本的jQuery回退。

Answer 2

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

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