Javascript 动画淡入效果CSS

我使用纯css的方式来实现衰减截断。我的。我想要的是慢慢地在一些动画中应用相同的淡入效果

我尝试了

jQuery.animate

，但这似乎不适用于后台属性。还尝试了

动画持续时间：5s

，但它似乎只适用于悬停效果

---

如何实现它？

您可以设置宽度的动画

。衰减\u截断：在

之后进行衰减效果

大概是这样的：

正文{
背景：#ffffff；
}
.u截断{
文字装饰：无；
字体大小：30px；
颜色：#4296d2；
文本溢出：剪辑；
溢出：隐藏；
空白：nowrap；
位置：相对位置；
}
.u截断：在{
宽度：100px；
内容：“；
身高：100%；
排名：0；
右：0；
位置：绝对位置；
动画持续时间：4s；
动画名称：myFade；
背景：线性梯度（向右，rgba（255，255，255，0.2），rgba（255，255，255，1）50%，rgba（255，255，255，1））；
}
@关键帧myFade{
从{
宽度：0px；
}
到{
宽度：100px；
}
}

---

将此添加到类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;
        }
    }

---

看看这个。这对你有用吗？@BhumiShah谢谢你的提示。但是，我希望动画只发生在淡入淡出的部分。就像是慢慢褪色，整个文本都会褪色。我只希望在最后几个字符中出现褪色。谢谢