如何为CSS中完成淡入平移的文本添加持续上下动画？

要实现先淡入平移到屏幕中心、再无限轻柔上下弹跳的效果，只需修改文本元素的animation属性，让两个动画按顺序执行即可：

1. 让第一个动画结束后保留最终状态：给fadeInTranslate动画添加forwards填充模式，确保动画结束后文本停在屏幕中心位置。
2. 延迟启动弹跳动画：设置bounce动画的延迟时间等于第一个动画的时长（4秒），让它在淡入平移完成后再开始。
3. 让弹跳动画无限循环：给bounce动画添加infinite属性，持续呈现等待加载的轻柔效果。

修改后的完整CSS代码如下：

.imgContainer {
  width: 100%;
  height: 86.6vh;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/8/85/Sky-3.jpg");
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
}

.imgContainer p {
  color: white;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
  text-align: center;
  text-shadow: -1px 0 #000000, 1px 0 #000000, 0 1px #000000, 0 -1px #000000;
  /* 核心修改：按顺序执行两个动画 */
  animation: fadeInTranslate 4s ease-in-out forwards, bounce 1.5s ease-in-out 4s infinite;
  opacity: 1;  
}

@keyframes fadeInTranslate {
  from {   
    transform: translate(-50%, 400%);
    opacity: 0;
  }
  to {
    transform: translate(-50%, -50%);
    opacity: 1;
  }
}

@keyframes bounce {
  0%, 100% {
    transform: translate(-50%, -50%);
  }
  50% {
    /* 调整数值可改变弹跳幅度，-48%/-52%都能实现轻柔效果 */
    transform: translate(-50%, -52%);
  }
}

HTML代码无需修改：

<div class="imgContainer">
  <p>Make Your Dreams Come True</p>
</div>

关键细节说明 #

• forwards：确保fadeInTranslate动画结束后，文本保持动画最后一帧的样式（屏幕中心位置）。
• 4秒延迟：刚好匹配第一个动画的时长，保证弹跳效果在淡入平移完成后才触发。
• infinite：让bounce动画无限循环，持续呈现加载等待的轻柔弹跳感。

内容的提问来源于stack exchange，提问作者Erfan Ta