Question

尝试将伪元素线从左到右生长到容器的全宽，然后从右到左将其缩小到零宽度。旁注：在JavaScript中，我将在超时后添加“带下划线的动画”类。

我尝试摆弄一些关键帧。

em::after {
    content: "";
    height: 1px;
    width: 0;
    display: inline-block;
    position: absolute;
    left: 0;
    background: green;
    transition: all;
}

.underlined-animated::after {
    animation: underline-animated 5s forwards;
}

@keyframes underline-animated {
    0%   {width: 0;}
    50%  {width: 100%; left: initial; right:0;}
    100% {width: 0;}
}

我希望这条线在一个动画中从左向右增长-达到容器宽度的100％，然后从右向左收缩-达到容器宽度的0％。< / p>

以上代码的结果只是一条奇怪的增长和缩小行。

Answer 1

不是对width进行动画处理，而是对right进行动画，直至达到50％的关键帧，并使left从50%关键帧到结束：

em::after {
  content: "";
  height: 1px;
  display: inline-block;
  position: absolute;
  left: 0;
  background: green;
  transition: all;
}

.underlined-animated::after {
  animation: underline-animated 5s forwards;
}

@keyframes underline-animated {
  0% {
    right: 100%;
  }
  50% {
    right: 0;
    left: 0;
  }
  100% {
    right: 0;
    left: 100%;
  }
}

<em class="underlined-animated">I'm the text</em>

对从0宽度到100％宽度从左到右的:: after动画行

1 个答案: