html - 是否可以为 CSS line-through text-decoration 设置动画？

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>