javascript - 动画淡入淡出效果 CSS

Question

我正在使用纯 css 方式来实现褪色 chop 。我的FIDDLE .我想要的是慢慢地对一些动画应用相同的淡入淡出效果。

我尝试了 jQuery.animate，但这似乎不适用于背景属性。也尝试过 animation-duration: 5s，但它似乎只适用于悬停效果。

我怎样才能实现它？

Answer 1

在你的类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;
        }
    }