1

I'm using pure css way of implementing faded truncation. My FIDDLE. What I want is to apply the same fading effect with some animation slowly.

I tried jQuery.animate, but that doesn't seem to work with background property. Also tried animation-duration: 5s, but it seems to work only with hover effect.

How can I achieve it?

2
  • check this one jsfiddle.net/m9v4u1mo/2. will it work for you?
    – Bhumi Shah
    Mar 21, 2016 at 11:00
  • @BhumiShah Thanks for the tip. But, I want animation to happen only to the fading portion. It's like fading happens slowly.
    – Abhi
    Mar 21, 2016 at 11:01

2 Answers 2

2

add this in your class css

 .faded_truncation {
      text-decoration: none;
      font-size: 30px;
      color: #4296d2;
      text-overflow: clip;
      overflow: hidden;
      white-space: nowrap;
      position: relative;
      - animation: fadein 2s;
      -moz-animation: fadein 2s; 
      -webkit-animation: fadein 2s; 
      -o-animation: fadein 2s; 
    }


    @keyframes fadein {
        from {
            opacity:0;
        }
        to {
            opacity:1;
        }
    }
1
  • This fades in the entire text. I want the fading to happen for last few characters only. Thanks
    – Abhi
    Mar 21, 2016 at 11:13
1

You could animated the width of you .faded_truncation:after to make the fade effect.

Something like this:

body{
  background: #ffffff;
}
.faded_truncation {
  text-decoration: none;
  font-size: 30px;
  color: #4296d2;
  text-overflow: clip;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.faded_truncation:after {
  width: 100px;
  content: "";
  height: 100%;
  top: 0;
  right: 0;
  position: absolute;
  animation-duration: 4s;
  animation-name: myFade;
  background: linear-gradient(to right, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 1));
}


@keyframes myFade {
  from {
    width: 0px;
  }

  to {
    width: 100px;
  }
}
<a href="/" class="faded_truncation">Some Text To Be Truncated</a>

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.