平滑过渡到容器内的项目答案

【问题标题】：Make a smooth transition to items inside a container平滑过渡到容器内的项目
【发布时间】：2022-10-24 13:25:55
【问题描述】：

我想将“Hello world”从左到右放入一个白色容器中，但我不希望容器移动。

只需要移动文本，文本从左到右闪烁，就像一个令人赏心悦目的快速滑块移动。

如何使用 CSS 动画实现这一点？

body {
  background: red
}

.container {
  background: white;
  color: black;
  padding: 20px;
  margin: 20px;
}

<div class="container">
  <h1>Hello world</h1>
</div>

【问题讨论】：

标签： css css-animations

【解决方案1】：

制作动画使用@keyframes

如果在外部使用overflow，则使文本不可见

forwards 用于保存动画的最后一个关键帧。

body {
  background: red
}

.container {
  background: white;
  color: black;
  padding: 20px;
  margin: 20px;
}

.container {
  overflow: auto; /* use "hidden" instead if it shows a unnecessary scrollbar. */
}

h1 {
  animation: toRight 0.2s ease-in forwards;
  transform: translateX(-50%);
}

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

<div class="container">
  <h1>Hello world</h1>
</div>

【讨论】：

这就是我想要的。您添加容器溢出的任何原因：自动？
@Indiestartupman 是的，所以文本不会显示在红色背景上，只有白色。这工作正常，因为动画从左到右开始，但如果动画是从右到左，则使用overflow: hidden，因此不会触发自动滚动条。
如何加快从左到右的运动。我想让动作快吗？
@Indiestartupman 只需更改秒值，❌1s✅0.2s animation: toRight 0.2s ease-in forwards; 希望它能解决您的错误。祝你今天过得愉快！