CSS fade left to right

by

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.

More Related Contents:

  1. How to display an chage photo option on mouse hover similar to linkedin using Javascript? [closed]
  2. Input type="text" with select functionality after clicking on Input type="text"
  3. How to dectect objects' overlaping situations in javascirpt? [closed]
  4. jQuery .animate function not responding properly
  5. How to force browser to show image 3 inches wide?
  6. Reloading a single div in an html page [closed]
  7. How to invoke animation when redirection in jsf?
  8. Only detect click event on pseudo-element
  9. Can I use HTML tags in the options for select elements? [duplicate]
  10. Select all elements that have a specific CSS, using jQuery
  11. How to build simple jQuery image slider with sliding or opacity effect?
  12. How can I disable a browser or element scrollbar, but still allow scrolling with wheel or arrow keys?
  13. Hide scrollbar while still being able to scroll with mouse/keyboard [duplicate]
  14. Border Radius for IE8
  15. make html text input field grow as I type?
  16. Padding or margin value in pixels as integer using jQuery
  17. Creating a select box with a search option
  18. Trees in Twitter Bootstrap [closed]
  19. How can I refresh the screen on browser resize?
  20. Fill available spaces between labels with dots or hyphens
  21. jQuery in Chrome returns “block” instead of “inline”
  22. How To Include CSS and jQuery in my WordPress plugin?
  23. Detect browser wrapped lines via javascript
  24. Extracting text from a contentEditable div
  25. Prevent iOS bounce without disabling scroll ability
  26. How do I make an area unclickable with CSS?
  27. How can I dynamically highlight strings on a web page?
  28. Detect if dropdown navigation would go off screen and reposition it
  29. Iframe inherit from parent
  30. Bootstrap Dropdown menu is not working

Leave a Comment