如何让 span 标签中的文本慢慢消失并缩小与 CSS 的差距？

Question

我用短语I am super strong创建了一个代码，我用CSS中的animate让super这个词慢慢消失了，问题是我使用 position: absolute 所以跨度留下的 space 间隙会关闭并且它会立即关闭，而我想要一种慢慢关闭间隙的效果，类似于我让跨度随着不透明度消失的方式。这是我编写的代码片段：

#title {
  text-align: center;
}

#title > span {
  animation-name: title;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes title {
  0%   {
    opacity: 1;
  }
  50%  {
    opacity: 0;
    position: static;
    }
  100% {
    opacity: 0;
    position: absolute;
  }
}

<h1 id="title">I am<span> super</span> strong</h1>

Answer 1

您可以设置宽度动画以获得所需的效果。请记住，它不适用于跨度默认的 display: inline，但应该适用于 block、inline-block 等

#title {
  text-align: center;
}

#title > span {
  display: inline-block;
  animation-name: title;
  animation-duration: 4s;
  animation-iteration-count: infinite;
}

@keyframes title {
  0%   {
    width: 88px;
    opacity: 1;
  }
  50%  {
    opacity: 0;
    }
  75%  {
    width: 88px;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

<h1 id="title">I am <span>super</span> strong</h1>

Answer 2

您可以为宽度设置动画，但如果其初始位置为自动则不能。在这种情况下，您将不知道 super 这个词有多宽，因为不同 fonts/systems/users' rem 设置可能会改变它。

但是，您可以设置最大宽度的动画，并让最大宽度开始时变大，并在单词消失后逐渐将最大宽度更改为 0。

然后反转这个过程（假设这就是你想要做的）关键帧的后半部分可以做到这一点。显然，您需要更改时间以考虑到这一点。

#title {
  text-align: center;
}

#title>span {
  display: inline-block;
  animation-name: title;
  animation-duration: 8s;
  animation-direction: both;
  animation-iteration-count: infinite;
}

@keyframes title {
  0% {
    opacity: 1;
    max-width: 40%;
    width: auto;
  }
  25% {
    opacity: 0;
    max-width: 40%;
  }
  50% {
    opacity: 0;
    max-width: 0;
  }
  75% {
    opacity: 0;
    max-width: 40%;
  }
  100% {
    opacity: 1;
    max-width: 40%;
  }
}

<h1 id="title">I am<span> super</span> strong</h1>

如何让 span 标签中的文本慢慢消失并缩小与 CSS 的差距？

How can I make the text in a span tag slowly disappear and close its gap with CSS?

html

css

keyframe

css-animations