要实现一个图片在视窗底部中心左右快速摇摆，并且在每次摇摆结束后有一个短暂的停留，你可以通过调整动画的百分比和速度曲线来实现。
html源码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片底部中心快速摇摆并停留</title>
<style>
.swing-image { position: fixed; bottom: 0; /* 定位到视窗底部 */
left: 50%; /* 定位到视窗水平中心 */
transform: translateX(-50%); /* 确保图片中心与视窗底部中心对齐 */
animation: swing 3s ease-in-out infinite; /* 动画持续时间为3秒，包含摇摆和停留 */
transform-origin: bottom center; /* 设置旋转中心为底部中心 */ }
@keyframes swing { 0%, 20% { transform: rotate(0deg); } /* 初始状态，不旋转 */
25% { transform: rotate(20deg); } /* 开始向右摇摆 */
35% { transform: rotate(-20deg); } /* 开始向左摇摆 */
50% { transform: rotate(0deg); } /* 回到初始状态，并短暂停留 */
50.1%, 70% { transform: rotate(0deg); } /* 延长停留时间 */ /* 重复上述摇摆过程 */
75% { transform: rotate(20deg); }
85% { transform: rotate(-20deg); }
100% { transform: rotate(0deg); } }
</style>
</head>
<body>
<img src="your-image-path.jpg" alt="摇摆图片" class="swing-image">
<!-- 其他页面内容 -->
</body>
</html>
以上为完整代码,动作可以更具css数值自己调试使用！
