フェイディング効果をアニメーション化する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

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