Question

我使用纯css方式实现淡化截断。我的FIDDLE。我想要的是慢慢地对一些动画应用相同的淡化效果。

我尝试了jQuery.animate，但这似乎与background属性无关。还尝试了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;
        }
    }

Answer 2

您可以为.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>

动画褪色效果CSS

2 个答案: