是否可以通过文本装饰为 CSS 行设置动画？

Question

我正在尝试使用 CSS 为一段文本设置一条线的动画，但它实际上并不是动画，只是从隐藏到显示。谁能告诉我我正在尝试的是否真的可行？如果没有，是否有另一种方法来实现这一目标？ HTML：

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

CSS：

@keyframes strike{
                from{text-decoration: none;}
                to{text-decoration: line-through;}
            }
 .strike{  
    -webkit-animation-name: strike; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 4s; /* Chrome, Safari, Opera */
    animation-name: strike;
    animation-duration: 4s;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-fill-mode: forwards; 
    }

Answer 1

你可以像这样使用伪

注意（感谢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>

Answer 2

这取决于您要如何为其设置动画。

由于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>

Answer 3

这是accepted 答案的变体，使用图像提供动画“涂鸦”删除线。

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.

Answer 4

根据W3Schools，text-decoration 属性是不可动画的。

但是，如果您使用 jQuery，则可以。 （见here）