CSS从左向右淡出

Question

是否有一种方法可以仅使用CSS淡入淡出元素(至少只是文本)从左到右,反之亦然？

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

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

Answer 1

是的,您可以使用CSS3动画(请在此处查看浏览器支持).

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

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