如何制作有弹性的文本轮播CSS

<div class="text-carousel">
  <div class="text-item">文本1</div>
  <div class="text-item">文本2</div>
  <div class="text-item">文本3</div>
</div>

.text-carousel {
  width: 300px; /* 设置容器宽度 */
  height: 50px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出容器范围的内容 */
}

.text-item {
  display: inline-block; /* 将文本项水平排列 */
  white-space: nowrap; /* 防止文本换行 */
  animation: carousel 10s infinite; /* 设置动画效果 */
}

@keyframes carousel {
  0% {
    transform: translateX(0); /* 初始位置 */
  }
  33% {
    transform: translateX(-100%); /* 向左平移100% */
  }
  66% {
    transform: translateX(-200%); /* 向左平移200% */
  }
  100% {
    transform: translateX(0); /* 回到初始位置 */
  }
}