animation 与 transform: skew() 可结合实现倾斜动画，通过 @keyframes 控制 skew 角度变化，用于按钮悬停、卡片入场等交互反馈，需控制角度与时间以保持视觉流畅自然。
CSS 动画中的 animation 与 transform: skew() 可以结合使用，实现有趣的倾斜动画效果。skew 是一种 2D 变形（transform），用于让元素沿 X 轴、Y 轴或两者同时倾斜指定角度。通过 animation 控制 skew 的变化过程，可以制作出动态的视觉反馈，比如按钮悬停倾斜、卡片翻转前奏等。
1. skew 倾斜的基本语法
skew() 函数接受一个或两个参数，分别表示 X 和 Y 方向的倾斜角度（单位为 deg）：
- skew(30deg) —— 仅在 X 轴方向倾斜 30 度
- skew(30deg, 10deg) —— X 轴倾斜 30 度，Y 轴倾斜 10 度
例如：
.element {
transform: skew(20deg, -10deg);
}
2. 使用 animation 实现动态倾斜
将 skew 作为 transform 属性的一部分，配合 @keyframes 定义动画关键帧，可实现平滑的倾斜动画。
立即学习“前端免费学习笔记（深入）”；
示例：鼠标悬停时元素从无倾斜变为倾斜 15 度，再恢复
.animated-box {
width: 100px;
height: 100px;
background: #3498db;
margin: 50px auto;
transition: transform 0.3s ease;
}
.animated-box:hover {
transform: skew(15deg, -5deg);
}
或者使用 animation 实现自动播放的倾斜抖动效果：
@keyframes wobble {
0% { transform: skew(0); }
25% { transform: skew(10deg, -5deg); }
50% { transform: skew(-10deg, 5deg); }
75% { transform: skew(5deg, -2deg); }
100% { transform: skew(0); }
}
.wobble-animation {
animation: wobble 2s ease-in-out infinite;
}
3. 实际应用场景建议
倾斜动画适合用于轻量级交互反馈，但需注意控制幅度，避免影响可读性或造成视觉不适。
- 按钮悬停效果：轻微 skew 增加动感，搭配 transition 更自然
- 加载动画前奏：用 skew 模拟“晃动”提示用户注意
- 卡片入场动画：结合 translate 和 skew 制造立体进入感
基本上就这些。合理使用 skew 配合 animation，能让界面更生动，但要避免过度使用导致体验下降。关键是控制角度和持续时间，保持流畅自然。
