如何用css relative与animation结合制作偏移动画-css教程-PHP中文网

如何用css relative与animation结合制作偏移动画

P粉602998670

发布： 2025-09-27 20:56:02

原创

468人浏览过

使用position: relative和@keyframes可实现元素偏移动画。先设置position: relative使元素保持布局稳定，再通过@keyframes定义动画关键帧，推荐使用transform: translateX()实现位移以提升性能，最后将动画绑定到元素上，设置动画名称、持续时间、速度曲线和重复次数等参数。例如让一个蓝色方块在原位置左右来回滑动，只需设置animation: slideRight 2s ease infinite alternate，其中slideRight定义从translateX(0)到translateX(150px)的位移变化。整个过程流畅且不影响页面布局。

如何用css relative与animation结合制作偏移动画

使用 CSS 的 position: relative 与 @keyframes animation 可以轻松实现元素的偏移动画。关键在于通过相对定位控制元素在原有位置上的偏移，并结合动画规则让偏移量随时间变化。

1. 设置 relative 定位

要让元素能相对于自己原本的位置移动，先设置 position: relative。这样不会影响页面布局，同时允许你使用 top, right, bottom, left 来调整位置。

.moving-element {
  position: relative;
}

登录后复制

2. 定义 @keyframes 动画

使用 @keyframes 定义动画的关键帧。比如从左边移动到右边，可以通过改变 left 或 transform: translateX() 实现。

@keyframes slideRight {
  from {
    left: 0;
  }
  to {
    left: 200px;
  }
}

登录后复制

或者更推荐使用 transform，性能更好：

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

卡拉OK视频制作

卡拉OK视频制作，在几分钟内制作出你的卡拉OK视频

178

查看详情

@keyframes slideRight {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(200px);
  }
}

登录后复制

3. 应用 animation 属性

将定义好的动画绑定到元素上，设置持续时间、重复次数等参数。

.moving-element {
  position: relative;
  animation: slideRight 2s ease-in-out infinite;
}

登录后复制

说明：

slideRight：动画名称
2s：动画持续2秒
ease-in-out：速度曲线
infinite：无限循环

4. 完整示例

<div class="box">我会移动</div>

<style>
.box {
  width: 100px;
  height: 100px;
  background: blue;
  color: white;
  text-align: center;
  line-height: 100px;
  position: relative;
  animation: slideRight 2s ease infinite alternate;
}

@keyframes slideRight {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(150px);
  }
}
</style>

登录后复制

这个例子中，蓝色方块会在原位置左右来回滑动。

基本上就这些。用 relative 保持布局稳定，再配合 animation 控制偏移，就能做出流畅的移动效果。注意优先使用 transform 而非 left/right，性能更优。

以上就是如何用css relative与animation结合制作偏移动画的详细内容，更多请关注php中文网其它相关文章！