使用position: relative和@keyframes可实现元素偏移动画。先设置position: relative使元素保持布局稳定，再通过@keyframes定义动画关键帧，推荐使用transform: translateX()实现位移以提升性能，最后将动画绑定到元素上，设置动画名称、持续时间、速度曲线和重复次数等参数。例如让一个蓝色方块在原位置左右来回滑动，只需设置animation: slideRight 2s ease infinite alternate，其中slideRight定义从translateX(0)到translateX(150px)的位移变化。整个过程流畅且不影响页面布局。
使用 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，性能更好：
立即学习“前端免费学习笔记（深入）”；
@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，性能更优。