css animation与transform结合制作平移动画

P粉602998670 2025-10-17 00:00:00 次阅读

使用CSS transform和animation可高效实现流畅平移动画。1. transform的translate()函数通过GPU加速控制位移，避免重排；2. animation结合@keyframes定义关键帧动画，如translateX实现水平移动；3. 常用于按钮悬停、轮播图等场景，提升交互体验；4. 注意使用will-change优化渲染，避免频繁修改layout属性，确保动画性能。

使用 CSS 的 animation 与 transform 结合，可以高效实现元素的平移动画。这种方式性能好，不会触发重排，只影响合成层，适合制作流畅的位移效果。

1. transform 用于控制位移

transform: translate() 是实现平移的最佳方式，相比改变 left、top 等属性，它利用 GPU 加速，动画更流畅。

常用语法：

translateX(x)：沿 X 轴移动
translateY(y)：沿 Y 轴移动
translate(x, y)：同时沿 X 和 Y 轴移动

2. animation 驱动动画过程

通过 @keyframes 定义动画关键帧，在其中使用 transform 设置不同阶段的位置。

示例：让一个盒子从左到右平移 200px

.element {
  width: 100px;
  height: 100px;
  background: blue;
  position: relative;
  animation: slide 2s ease-in-out infinite;
}

@keyframes slide {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(200px);
  }
}

这个动画会在 2 秒内循环播放，元素沿 X 轴平移 200px。

3. 实际应用场景建议

这类组合常用于按钮悬停位移、轮播图切换、加载动画等。

例如：悬停时向右微移

.button {
  display: inline-block;
  padding: 10px 20px;
  background: #007bff;
  color: white;
  transition: transform 0.3s;
}

.button:hover {
  animation: moveRight 0.3s ease-out forwards;
}

@keyframes moveRight {
  to {
    transform: translateX(10px);
  }
}

鼠标悬停时，按钮向右移动 10px 并停留（forwards 保持最终状态）。