动画淡入淡出效果 CSS

Question

我正在使用纯 css 方式来实现褪色截断。我的小提琴。我想要的是慢慢地应用与一些动画相同的淡入淡出效果。

我尝试了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;
        }
    }

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>