CODEWITHSUNDEEP
javascriptjquerycssanimation
Abhi
Abhi

Reputation: 4261

Animate fading effect CSS

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?

Upvotes: 1

Views: 88

Answers (2)

Vikas Vanvi
Vikas Vanvi

Reputation: 462

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

Upvotes: 2

jolmos
jolmos

Reputation: 1575

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>

Upvotes: 1

Related Questions