如何实现文本从固定位置而非屏幕左侧滑入显示？

需要实现文本从页面固定位置（距左侧50px处）滑入显示的效果，页面加载时触发动画，以下是调整后的实现方案：

修改后的代码 #

HTML（无需改动） #

<div class="slogan" id="content">
  <h1>Contributing To Peace</h1>
  <p class="tablet-size">I don't provide all the answers - I want people to think for
    themselves. Want to save the world - the strategy is to affirm people as they are
    without trying to change them. Then they will treat others the same way.</p>
</div>

CSS（核心修改） #

.slogan {
  display: block;
  width: 630px;
  height: 180px;
  margin: 50px;
  padding-top: 20px;
  padding-bottom: 20px;
  padding-left: 25px;
  line-height: 1.5;
  font-weight: 900;
  font-size: 45px;
  text-transform: capitalize;
  color: var(--color-4) !important;
  border-left: 3px solid #ffffff;
  /* 动画基础设置 */
  position: relative;
  /* 初始位置：元素完全隐藏在距页面左侧50px的左侧区域 */
  left: -630px;
  transition: left 0.8s ease-out; /* 调整过渡曲线和时长，优化动画质感 */
  gap: 50px;
}

.slogan.visible {
  /* 最终位置：对应margin 50px，即距页面左侧50px */
  left: 0;
}

.slogan h1 {
  font-size: 30px;
  text-transform: capitalize;
}

.slogan p.tablet-size {
  font-weight: 900;
  color: var(--color-4);
  display: block;
  font-size: 16px;
  line-height: 1.35;
}

JavaScript（调整触发时机） #

document.addEventListener('DOMContentLoaded', () => {
  const content = document.getElementById('content');
  // 页面加载完成后立即触发动画
  content.classList.add('visible');
  // 若需要延迟触发，可保留以下代码并调整时长：
  // setTimeout(() => {
  //   content.classList.add('visible');
  // }, 300);
});

关键修改说明 #

• 初始位置校准：将原left: -100%改为left: -630px（与元素宽度一致），确保元素初始时完全隐藏在距页面左侧50px的左侧（因容器已有margin:50px），滑入后刚好停在目标位置。
• 过渡效果优化：改用ease-out过渡曲线，让动画结束阶段更平缓自然，时长可根据需求灵活调整。
• 触发时机调整：移除原1.5秒延迟，页面加载完成后立即启动动画，贴合"加载时触发"的需求；如需延迟，可重新启用setTimeout。

内容的提问来源于stack exchange，提问作者Richard Larson