页面加载时按钮从左右到中间的过渡实现方案

没问题！这种交替从两侧滑入的加载动画用CSS就能轻松实现，而且逻辑直观，完全符合你优先用CSS的需求。我给你一步步拆解实现思路和代码：

核心思路 #

1. 用CSS @keyframes 定义两种动画：一种是从左侧滑入（初始位置在容器外左侧，移动到正常位置），另一种是从右侧滑入。
2. 给按钮设置初始隐藏状态（比如透明），通过 animation-fill-mode: forwards 让动画结束后保持最终状态。
3. 给奇数位按钮（button1、button3...）绑定左侧滑入动画，偶数位按钮（button2、button4...）绑定右侧滑入动画，还可以添加延迟让动画错开，效果更自然。

完整代码示例 #

HTML结构 #

<div class="button-container">
  <button id="button1">按钮1</button>
  <button id="button2">按钮2</button>
  <button id="button3">按钮3</button>
  <button id="button4">按钮4</button>
</div>

CSS样式 #

/* 容器样式：让按钮居中排列，间距均匀 */
.button-container {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}

/* 按钮基础样式 */
button {
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  border: none;
  border-radius: 4px;
  background-color: #4285f4;
  color: #fff;
  opacity: 0; /* 初始透明，动画结束后显示 */
  animation-fill-mode: forwards; /* 保持动画结束后的状态 */
  animation-duration: 0.6s; /* 动画时长，可按需调整 */
  animation-timing-function: ease-out; /* 动画曲线，让结尾更平滑 */
}

/* 定义左侧滑入动画 */
@keyframes slide-in-left {
  from {
    transform: translateX(-100%); /* 初始位置在容器外左侧 */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* 移动到正常位置 */
    opacity: 1;
  }
}

/* 定义右侧滑入动画 */
@keyframes slide-in-right {
  from {
    transform: translateX(100%); /* 初始位置在容器外右侧 */
    opacity: 0;
  }
  to {
    transform: translateX(0); /* 移动到正常位置 */
    opacity: 1;
  }
}

/* 给每个按钮绑定动画和延迟 */
#button1 {
  animation-name: slide-in-left;
  animation-delay: 0s;
}

#button2 {
  animation-name: slide-in-right;
  animation-delay: 0.1s;
}

#button3 {
  animation-name: slide-in-left;
  animation-delay: 0.2s;
}

#button4 {
  animation-name: slide-in-right;
  animation-delay: 0.3s;
}

优化小技巧 #

如果你的按钮数量较多，不想逐个写ID选择器，可以用CSS的 :nth-child() 伪类批量设置，代码更简洁：

/* 奇数位按钮用左侧滑入 */
.button-container button:nth-child(odd) {
  animation-name: slide-in-left;
}

/* 偶数位按钮用右侧滑入 */
.button-container button:nth-child(even) {
  animation-name: slide-in-right;
}

/* 批量设置延迟：每个按钮比前一个晚0.1秒启动 */
.button-container button:nth-child(1) { animation-delay: 0s; }
.button-container button:nth-child(2) { animation-delay: 0.1s; }
.button-container button:nth-child(3) { animation-delay: 0.2s; }
.button-container button:nth-child(4) { animation-delay: 0.3s; }
/* 更多按钮依次类推即可 */

可选JS方案（简单版） #

如果之后需要动态生成按钮，或者想更灵活控制动画时机，可以用JS给按钮添加动画类：

// 页面加载完成后执行
window.addEventListener('load', () => {
  const buttons = document.querySelectorAll('.button-container button');
  buttons.forEach((btn, index) => {
    // 奇数索引（从0开始）对应左侧滑入，偶数对应右侧
    const animationClass = index % 2 === 0 ? 'slide-left' : 'slide-right';
    btn.classList.add(animationClass);
    // 延迟：每个按钮间隔0.1秒
    btn.style.animationDelay = `${index * 0.1}s`;
  });
});

对应的CSS需要把动画封装成类：

.slide-left {
  animation: slide-in-left 0.6s ease-out forwards;
}

.slide-right {
  animation: slide-in-right 0.6s ease-out forwards;
}

不过看你更熟悉CSS，优先用纯CSS方案就足够啦，调整动画时长、延迟或者颜色都很方便。

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