13

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:

enter image description here

Actually, if it requires jQuery, I'll accept that too, just as a second priority.

Bobe
  • 2,040
  • 8
  • 29
  • 49
  • 2
    You could use an additional layer holding a gradient (from white to transparent) and move that layer horizontally to get the desired effect. – feeela Oct 02 '12 at 08:35
  • @feeela That's what I thought might work best, but I wasn't sure how to achieve the effect above, since the layer would just go back instead of continue moving in the same direction. – Bobe Oct 02 '12 at 08:36
  • Place a layer above the text and animate a gradient? This could work, however it's been a long time since I used CSS3 gradients. – Zeta Oct 02 '12 at 08:41
  • If anything it would just be a PNG like Geuis said, not a CSS3 gradient. I can do that easily, but the trick is making the layer travel in the same direction on mouse out. Unless...I just make the layer a sprite with a reverse gradient below and have it move the background up and down on hover and mouse out. – Bobe Oct 02 '12 at 08:46
  • @Zeta There is currently no way of animating gradients in CSS3. Maybe in the future… – feeela Oct 02 '12 at 09:57

3 Answers3

27

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.

Yaseen Ahmad
  • 1,807
  • 5
  • 25
  • 43
Giona
  • 20,734
  • 4
  • 56
  • 68
  • Its possible the same effect but without using background? Because if use it over a image, you will see a white background rectangle. THX – Jose Mar 30 '20 at 20:50
1

In photoshop or other image editing software, create a circular area that is transparent in the middle and on all sides fades out to solid white. Feel free to crop the top/bottom as needed. You can then use css transitions to animate the graphic from left to right to achieve the effect in your demo. For browsers like IE that don't support transitions, use the cssHooks feature in jquery to perform the animations with jQuery.

You could create this effect using css gradients, but you run into browser support issues, and using transitions on css gradients is very bad in terms of performance. However, simply animating a png24 is very easy and makes the same effect.

Geuis
  • 41,122
  • 56
  • 157
  • 219
1

I found a plugin which contains multiple text animations.

https://tobiasahlin.com/moving-letters/

Demo : https://jsfiddle.net/Danzoftw/hp8qL1e3/7/

var textWrapper = document.querySelector('.demo');
textWrapper.innerHTML = textWrapper.textContent.replace(/\S/g, "<span class='letter'>$&</span>");

anime.timeline({loop: true})
  .add({
    targets: '.demo .letter',
    opacity: [0,1],
    easing: "easeInOutQuad",
    duration: 2250,
    delay: (el, i) => 150 * (i+1)
  }).add({
    targets: '.demo',
    opacity: 0,
    duration: 1000,
    easing: "easeOutExpo",
    delay: 1000
  });
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<h1 class="demo">Text animation demo</h1>

Hope this helps others. Cheers.

Vaibhav Nagvenkar
  • 11
  • 4