在网页交互设计中，倾斜动画可以让卡片、按钮或提示框看起来更灵动。CSS的transform属性提供了skew函数用来做斜切变形，再配合animation属性就能让这种变形随时间自动播放，不需要任何JavaScript代码。
一、skew函数的基础用法
skew函数有两种常见形式：skewX沿水平方向倾斜，skewY沿垂直方向倾斜。角度为正时元素向对应方向拉斜，为负则反向。下面是一段静态倾斜的样式：
/* 让元素沿X轴倾斜20度 */
.box {
width: 200px;
height: 100px;
background: #4ca1af;
transform: skewX(20deg);
}
二、用animation驱动skew产生动画
要把倾斜变成连续动画，需要定义keyframes并把animation绑定到元素上。关键属性包括动画名称、时长、速度曲线和循环次数。
1. 定义关键帧
我们在不同进度里设置不同的skew值，浏览器会自动补全中间过程：
@keyframes skew-shake {
0% { transform: skewX(0deg); }
25% { transform: skewX(15deg); }
50% { transform: skewX(0deg); }
75% { transform: skewX(-15deg); }
100% { transform: skewX(0deg); }
}
2. 绑定动画
使用animation简写属性，让上面的关键帧以1.2秒一轮、线性节奏、无限循环的方式运行：
.shake-box {
width: 200px;
height: 100px;
background: #ff7e5f;
animation: skew-shake 1.2s linear infinite;
}
三、同时倾斜与位移的组合
如果希望元素一边倾斜一边轻微移动，可以在同一transform里写多个函数，顺序会影响最终渲染：
@keyframes skew-move {
0% { transform: translateX(0) skewX(0); }
50% { transform: translateX(20px) skewX(10deg); }
100% { transform: translateX(0) skewX(0); }
}
.move-box {
width: 160px;
height: 80px;
background: #36d1dc;
animation: skew-move 2s ease-in-out infinite;
}
四、注意事项
- skew会让元素视觉上变形，可能影响内部文字可读性，建议只对装饰性区块使用。
- 在keyframes里如果混用transform和其他属性，要保证每一帧都写了完整的transform，否则会跳变。
- 旧版IE不支持transform与animation，需要加兼容前缀或引导用户升级浏览器。
五、完整HTML示例
下面给出一个可直接保存为html文件打开的完整例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>skew倾斜动画</title>
<style>
.card {
width: 220px;
height: 120px;
margin: 40px auto;
background: linear-gradient(135deg, #667eea, #764ba2);
color: #fff;
line-height: 120px;
text-align: center;
animation: skew-play 1.5s ease-in-out infinite;
}
@keyframes skew-play {
0% { transform: skewX(0); }
30% { transform: skewX(12deg); }
60% { transform: skewX(-12deg); }
100% { transform: skewX(0); }
}
</style>
</head>
<body>
<div class="card">倾斜动画演示</div>
</body>
</html>
通过上述方法，你可以灵活使用CSS animation与skew实现各种倾斜动效，提升页面的视觉表现力。
CSS_animationskew倾斜动画修改时间：2026-07-30 17:33:23