问题

在动画结束时，文本完全消失，我想要从右侧显示正在消失的文本，我不想让文本完全消失。

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100%;
  border: 1px solid orange;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

<!-- language: lang-html -->
<div class="wrapper">
    <p>嗨，你好吗？抱歉，你无法通过。</p>
</div>

<!-- end snippet -->

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100%;
  border: 1px solid orange;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 5s linear infinite;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

<div class="wrapper">
    <p>Hey, how you're doing? Sorry you can't get through.</p>
</div>

答案1

得分: 2

.wrapper {
    position: relative;
    overflow: hidden;
    height: 25px;
}

.wrapper div {
    display: flex;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee 8s linear infinite;
}

.wrapper span {
    width: 50%;
}

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

<div class="wrapper">
    <div>
        <span>嗨，你好吗？很抱歉你打不通电话。</span>
        <span>嗨，你好吗？很抱歉你打不通电话。</span>
    </div>
</div>

.wrapper {
    position: relative;
    overflow: hidden;
    height: 25px;
}

.wrapper div {
    display: flex;
    width: 200%;
    position: absolute;
    overflow: hidden;
    animation: marquee 8s linear infinite;
}

.wrapper span {
    width: 50%;
}

@keyframes marquee {
    0% {
        left: 0;
    }

    100% {
        left: -100%;
    }
}

    <div class="wrapper">
        <div>
            <span>Hey, how you're doing? Sorry you can't get through.</span>
            <span>Hey, how you're doing? Sorry you can't get through.</span>
        </div>
    </div>

答案2

得分: 0

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

这个动画的作用是将 div 从其原始位置移动 +100% 的宽度，到其原始位置 -100% 的宽度（即原始位置的左侧）。

使用 transform: translateX(0%) 可以将其移动到原始位置。

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

您需要更改 .wrapper p 中的 animation 参数，以使动画不重复播放，由于现在覆盖的距离较短，速度会比预期慢。

从 animation: marquee 5s linear infinite; 更改为 animation: marquee 2s linear;

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100%;
  border: 1px solid orange;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 2s linear;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

<!-- language: lang-html -->

<div class="wrapper">
    <p>Hey, how you're doing? Sorry you can't get through.</p>
</div>

<!-- end snippet -->

<details>
<summary>英文:</summary>

```css
@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

This animation means to move the div from its original position + 100% of its width, to its original position -100% of its width (which is to the left of its original position).

Using transform: translateX(0%) should move it to its original position.

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

You would have to change animation parameters in .wrapper p so that the animation doesn't keep repeating, and since the distance covered is now shorter, the speed would be slower than intended.

From animation: marquee 5s linear infinite; to animation: marquee 2s linear;

<!-- begin snippet: js hide: false console: true babel: null -->

<!-- language: lang-css -->

.wrapper {
  position: relative;
  overflow: hidden;
  height: 25px;
  width: 100%;
  border: 1px solid orange;
}

.wrapper p {
  position: absolute;
  margin: 0;
  line-height: 25px;
  white-space: nowrap;
  animation: marquee 2s linear;
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0%); }
}

<!-- language: lang-html -->

<div class="wrapper">
    <p>Hey, how you're doing? Sorry you can't get through.</p>
</div>

<!-- end snippet -->