CSS fade слева направо

Да, вы можете сделать это с помощью CSS3 анимации (Проверьте поддержку браузера здесь).

Вот простой пример: демо для стирания текста.

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%;}
}

Как вы можете видеть, существует резкий контраст на границах. Если вы используете градиент изображения вместо чистого белого фона, он будет отображаться лучше.

Затем вы можете использовать запасной вариант jQuery для IE9 и ниже.