你可以像这样使用一个伪

• 注意（感谢Phlame），如果要删除的行中断到第二行，则从左到右的动画将不起作用。为此，需要使用另一个伪元素和一些脚本来正确定位这两个元素。或者使用一些其他动画效果，例如就像Oriol's answer中建议的那样。*

@keyframes strike{
  0%   { width : 0; }
  100% { width: 100%; }
}
.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation-name: strike;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

这取决于你想要如何设置它。
由于text-decoration-color是可设置动画的，因此可以从transparent设置为auto设置动画。
但是这个属性还没有得到广泛的支持。

@keyframes strike {
  from { text-decoration-color: transparent; }
  to { text-decoration-color: auto; }
}
.strike {  
  text-decoration: line-through;
  animation: strike 4s linear;
}

<div>
    The text in the span <span class="strike">is what I want to strike out</span>.
</div>

下面是accepted答案的一个变体，使用一个图像来提供一个动画“scribble”删除线。

html {
  font-family: Helvetica;
  font-size: 24px;
}
.strike { position:relative; }
.strike::after {
  content:' ';
  position:absolute;
  top:50%; left:-3%;
  width:0; height:10px;
  opacity:80%;
  transform:translateY(-50%);
  background:repeat-x url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAKAQMAAAByjsdvAAAABlBMVEUAAADdMzNrjRuKAAAAAXRSTlMAQObYZgAAADdJREFUCNdj+MMABP8ZGCQY/h9g+MHw/AHzDwbGD+w/GBhq6h8wMNj/b2BgkP8HVMMPUsn+gQEAsTkQNRVnI4cAAAAASUVORK5CYII=);
  animation: strike 2s linear .3s 1 forwards;
}
@keyframes strike { to { width: 106%; } }

This thing and <span class="strike">this thing and</span> this thing.

这是非常优雅的，海事组织，使用linear-gradient作为背景，并油漆线是相同的颜色作为文本（currentColor）。
这种解决方案非常灵活，为许多有趣的效果打开了大门，并且比伪元素解决方案的代码少得多。

• PS：支持多行文字 *

来自我的CodePen：

span {
  --thickness: .1em;
  --strike: 0;
  
  background: linear-gradient(90deg, transparent, currentColor 0) no-repeat 
              right center / calc(var(--strike) * 100%) var(--thickness);

  transition: background-size .4s ease;
  font: 25px Arial;
  padding: 0 .2em;
}

span:hover {
  --strike: 1; /* "1" means "true" (show the strike line) */
  background-position-x: left;
}

<span contenteditable spellcheck='false'>
  Strike-through animation (hover)
 </span>

我已经能够找到一种方法来解决它，也适用于多行，我主要从Kevin Powell的code pen获得了这些信息：https://codepen.io/kevinpowell/pen/MWYwgOz.这是我的解决方案

.fancy-link {
  text-decoration: none;
  background-image: linear-gradient(red, red);
  background-repeat: no-repeat;
  background-position: center left;
  background-size: 0% 1px;
  transition: background-size 500ms ease-in-out;

  /* extra styling   */
/*   font-weight: var(--fw-bold); */
}

.fancy-link:hover {
  background-size: 100% 1px;
  color: inherit;
}

<div class="content">
  <p> <a class="fancy-link" href="#">sit amet consectetur adipisicing elit. Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae Impedit repudiandae assumenda beatae quo iure quaerat voluptate placeat. A eius cum, rem aspernatur ipsa illum. Commodi ullam cupiditate aliquid ducimus consequatur.</a></p>
</div>

此外，对于辅助功能问题，您可以添加

.fancy-link:hover{
  /*...former code*/
  text-decoration: line-through;
  text-decoration-color:transparent;
}

注意：“fancy-link”类不在paragraph标签上，而是在锚标签上。

根据W3Schools，text-decoration属性不可设置动画。
但是，如果你使用jQuery，你可以。（参见here）