Is there a way to fade elements (at least just text) in and out going left to right or vice-versa using only CSS?
Here is an example of what I mean:
Actually, if it requires jQuery, I'll accept that too, just as a second priority.
Yes, you can do it with CSS3 animations (check browser support here).
Here's a simple 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:
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.
