Эффект затухания животного CSS

Question

Я использую чистый css способ реализации выцветшего усечения. Мой FIDDLE. Я хочу, чтобы применить тот же эффект замирания с некоторой анимацией медленно.

Я пробовал jQuery.animate, но это не похоже на свойство фона. Также попробовал animation-duration: 5s, но, похоже, он работает только с эффектом зависания.

Как я могу это достичь?

Answer 1

Вы можете анимировать ширину вас .faded_truncation:after, чтобы сделать эффект затухания.

Что-то вроде этого:

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

добавить это в вашем классе 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; 
     } 
    }