Animate solma efekti CSS

Question

Ben soluk kesilme uygulayarak saf css yolunu kullanıyorum. Benim FIDDLE. İstediğim şey, bazı animasyonlarla aynı solma efektini yavaşça uygulamak.

jQuery.animate'u denedim, ancak arka plan özelliği ile çalışmıyor gibi görünüyor. Ayrıca animation-duration: 5s çalıştı, ancak yalnızca vurgulu etkisi ile çalışır gibi görünüyor.

Bunu nasıl başarabilirim?

Answer 1

Görüntü efektini yapmak için .faded_truncation:after genişliğini canlandırabilirsiniz. Böyle

şey:

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>

Answer 2

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