css动画元素位置与尺寸变化-css教程-PHP中文网

css动画元素位置与尺寸变化

P粉602998670

发布： 2025-10-24 08:21:02

原创

658人浏览过

使用transform实现位置与尺寸动画更高效，推荐translate()和scale()避免重排，结合二者可创建流畅动效。

css动画元素位置与尺寸变化

在CSS动画中，元素的位置与尺寸变化是常见的视觉效果需求。通过transform、position、width、height等属性，可以实现平滑且高性能的动画效果。

位置变化：移动元素

要让元素在页面中移动，推荐使用 transform: translate()，它比修改 left、top 等定位属性更高效，因为不会触发重排（reflow）。

示例：将一个元素向右下移动200px

@keyframes move {
  0% { transform: translate(0, 0); }
  100% { transform: translate(200px, 200px); }
}

.animated-box {
  width: 100px;
  height: 100px;
  background: blue;
  animation: move 2s ease-in-out;
}

如果使用 position: relative 配合 left/top，也能实现位移，但性能略低：

立即学习“前端免费学习笔记（深入）”；

@keyframes moveByPosition {
  0% { left: 0; top: 0; }
  100% { left: 200px; top: 200px; }
}

.animated-box {
  position: relative;
  animation: moveByPosition 2s;
}