Javascript 通过动画发布线条

我想通过动画创建一条简单的线条，到目前为止，我在这里：

。删除线{
显示：内联块；
位置：相对位置；
线高：1.5em；
}
删除线：之后{
内容：''；
位置：绝对位置；
显示：块；
宽度：100%；
高度：1px；
盒影：0 1pxRGBA（252,3,3,0.7）；
边缘顶部：-0.7em；
背景：rgba（252,3,3,0.8）；
变换原点：左中；
动画：删除线1s 0.5s立方贝塞尔（.55,0,1,1）1；
}
@关键帧删除线{
从{
变换：scaleX（0）；
}
到{
变换：scaleX（1）；
}
}

---

喜欢包装胜过玩具

您可以使用

动画填充模式

修复动画：

animation-fill-mode: backwards;

要触发动画，只需添加删除线类。我认为这样做行不通的地方是当你有一个多行文本时，因为你的

：：after

不会涵盖这一点

document.querySelector（'.streethrough'）.addEventListener（'click'，event=>{event.target.classList.toggle（'streethrough'）；}）
。删除线{
显示：内联块；
位置：相对位置；
线高：1.5em；
}
删除线：之后{
内容：''；
位置：绝对位置；
显示：块；
宽度：100%；
高度：1px；
盒影：0 1pxRGBA（252,3,3,0.7）；
边缘顶部：-0.7em；
背景：rgba（252,3,3,0.8）；
变换原点：左中；
动画：删除线1s 0.5s立方贝塞尔（.55,0,1,1）1；
动画填充模式：向后；
}
@关键帧删除线{
从{
变换：scaleX（0）；
}
到{
变换：scaleX（1）；
}
}
喜欢包装而不是玩具
以及如何使用javascript启动动画…@Pixier我知道，所以我总是在发布时感到不安，在按下tab键后我陷入恐慌，现在它选择了发布按钮，然后发布。。。。唉。这是一个不成熟的职位。