在悬停时进出动画

I'm trying to make a strikethrough animation like the effect here:

我正试图像这里的效果一样制作一个删除线动画：

The strike line appears from left to right and disappears from left to right.

打击线从左到右显示，从左到右消失。

@keyframes strike {
  0% {
    width: 0;
  }
  50% {
    width: 100%;
  }
  100% {
    width: 0;
  }
}

.strike {
  position: relative;
}

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

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

Is there a way to achieve that only with CSS ?

有没有办法只用CSS实现？

2 个解决方案

#1

You can use transforms and transform-origin in the keyframe animation to make strike-through apear from left to right and disapear from left to right.
The point is to scale the pseudo element on the X axis for 0 to 1 with a transform origin on the left then back to 0 with a transform origin on the right (similar to this hover effect see last example of the answer).

您可以在关键帧动画中使用变换和变换原点从左到右制作透视圆形，并从左到右旋转。关键是将X轴上的伪元素缩放为0到1，左边是变换原点，然后是右边的变换原点返回0（类似于这个悬停效果，请参见答案的最后一个例子）。

And here is an example with your markup :

以下是您的标记示例：

@keyframes strike{
  0%     { transform-origin:  0% 50%;transform:scaleX(0); }
  50%    { transform-origin:  0% 50%;transform:scaleX(1);  }
  50.01% { transform-origin:100% 50%;transform:scaleX(1);  }
  100%   { transform-origin:100% 50%;transform:scaleX(0);  }
}
.strike {
  position: relative;
}
.strike:hover:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
  animation: strike .75s ease-in-out forwards;
}

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

#2

Here is a sample using transition, where it on hover toggle left/right position.

这是一个使用转换的示例，它在悬停切换左/右位置。

.strike {
  position: relative;
}
.strike::after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  right: 100%;
  height: 1px;
  background: black;
}
.strike:hover::after {
  right: 0;
  left: 100%;
  transition: right .5s .0s, left .5s .5s;  
}

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

#1