是否可以通过文本修饰来设置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

你可以像这样使用伪

@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>