CSS实现左右摆动可通过@keyframes定义关键帧动画，结合transform: translateX()控制水平位移，具体步骤：先定义动画关键帧，如0%时translateX(0)，50%时translateX(100px)，100%时translateX(0)，形成左右往复；再为元素添加animation属性，设置动画名称（如swing）、持续时间（如2s）、缓动函数（如ease-in-out）及循环次数（infinite），示例代码：@keyframes swing {0%,100%{transform:translateX(0);}50%{transform:translateX(100px);}} .box{animation:swing 2s ease-in-out infinite;}，box为目标元素，通过调整translateX值和动画时长可控制摆动幅度与速度。CSS实现左右摆动动画的几种方法
左右摆动动画是网页设计中常见的动态效果，广泛应用于装饰元素、交互反馈以及模拟自然运动（如钟摆、旗帜飘动、树叶摇曳等），通过CSS的动画（@keyframes）、过渡（transition）和变换（transform）属性，开发者可以轻松实现这种效果，本文将详细介绍几种实用的CSS左右摆动实现方法,并分析各自的适用场景和性能特点。
使用 @keyframes + transform: translateX()（基础平移摆动）
这是最直接、最常用的左右摆动实现方式，通过定义关键帧控制元素在水平方向（X轴）上的平移路径，形成流畅的来回摆动效果，这种方法简单直观,适合大多数基础场景。
实现步骤：
定义HTML结构
<div class="swing-element">摆动元素</div>
编写CSS动画
.swing-element {
width: 100px;
height: 100px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
/* 初始位置 */
transform: translateX(0);
/* 应用动画 */
animation: swingHorizontal 2s ease-in-out infinite;
}
/* 定义左右摆动的关键帧 */
@keyframes swingHorizontal {
0% {
transform: translateX(0); /* 初始位置 */
}
25% {
transform: translateX(100px); /* 向右移动100px */
}
50% {
transform: translateX(0); /* 回到初始位置 */
}
75% {
transform: translateX(-100px); /* 向左移动100px */
}
100% {
transform: translateX(0); /* 回到初始位置，完成一个周期 */
}
}
关键参数解析：
-
@keyframes：定义动画的关键帧序列,通过百分比控制不同时间点的元素状态。0%和100%：动画的起始和结束位置（均为translateX(0)，确保动画循环时无缝衔接）。25%和75%：分别向右、向左移动的最大距离（可根据需求调整，如50px、200px等）。
-
animation：复合属性,简写了动画的多个子属性：swingHorizontal：动画名称（需与@keyframes名称一致）。2s：动画持续时间（一个完整摆动周期的时间，数值越小摆动越快）。ease-in-out：时间函数，控制动画加速/减速节奏（慢→快→慢，更接近自然运动）。infinite：动画迭代次数（无限循环）。
优化建议：
-
性能优化：对于频繁动画的元素，建议使用
transform而非left/margin属性，因为transform不会触发重排,性能更好。 -
响应式适配：可以使用相对单位（如
vw、）代替固定像素值,使摆动幅度能够适应不同屏幕尺寸：transform: translateX(10vw); /* 视口宽度的10% */
-
添加交互控制：通过JavaScript动态控制动画的播放状态：
// 暂停动画 document.querySelector('.swing-element').style.animationPlayState = 'paused'; // 恢复动画 document.querySelector('.swing-element').style.animationPlayState = 'running';
兼容性说明：
此方法在现代浏览器中支持良好,但在IE10及以下版本需要添加前缀：
.swing-element {
-webkit-animation: swingHorizontal 2s ease-in-out infinite;
-moz-animation: swingHorizontal 2s ease-in-out infinite;
-o-animation: swingHorizontal 2s ease-in-out infinite;
animation: swingHorizontal 2s ease-in-out infinite;
}
@-webkit-keyframes swingHorizontal {
/* 同样的关键帧定义 */
}
这种基础平移摆动方法适合实现简单的装饰性动画，如导航栏图标提示、加载动画等，对于需要更复杂物理效果的场景,可以考虑结合其他CSS属性或使用JavaScript实现更精细的控制。
