是否可以为CSS直通文本修饰设置动画效果？ [英] Is it possible to animate a CSS line-through text-decoration?

问题描述

我试图用CSS对一段文字进行动画处理，但它实际上并不是动画，只是从隐藏到显示。任何人都可以建议，如果我正在尝试实际上是可能的？如果没有，是否有另一种方法来实现这一目标？
HTML：

I am trying to animate with CSS the a line through on a bit of text, but it's not actually animating, just going from hidden to displayed. Can anyone advise if what I'm trying is actually possible? If not, is there another way to achieve this? HTML:

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

CSS：

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; 
    }

推荐答案

这

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

这篇关于是否可以为CSS直通文本修饰设置动画效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！