一、transition（过渡）
概念：
语法：
常用场景：悬停效果、状态切换等。
transition 实现属性的平滑过渡，最简单的动效方式。语法：
transition: 属性 时长 缓动函数;常用场景：悬停效果、状态切换等。
👇 鼠标悬停查看过渡效果
颜色过渡
缩放
圆角
阴影
1/* 基础过渡 */
2.box {
3 transition: all 0.3s ease;
4}
5
6/* 悬停效果 */
7.box:hover {
8 background: #e74c3c;
9 transform: scale(1.1);
10}
11
12/* 单个属性过渡 */
13.box {
14 transition: transform 0.3s ease;
15}
16
17/* 多个属性分别设置 */
18.box {
19 transition: transform 0.3s ease,
20 box-shadow 0.5s ease;
21}
二、transform（变换）
概念：
常用变换：
常用场景：图标旋转、图片缩放、元素移动等。
transform 对元素进行2D或3D变换，不会影响其他元素。常用变换：
rotate、scale、translate、skew常用场景：图标旋转、图片缩放、元素移动等。
👇 不同变换效果
rotate 旋转
15°
scale 缩放
1.2x
translate 移动
移动
skew 倾斜
倾斜
1/* 旋转 */
2transform: rotate(45deg);
3
4/* 缩放 */
5transform: scale(1.5); /* 放大1.5倍 */
6transform: scale(0.8); /* 缩小 */
7
8/* 移动 */
9transform: translate(20px, 10px);
10
11/* 倾斜 */
12transform: skew(10deg);
13
14/* 组合多个变换 */
15transform: rotate(45deg) scale(1.2);
16
17/* 原点 */
18transform-origin: center center;
三、animation（动画）
概念：
优势：比 transition 更强大，可以定义多个关键帧。
常用场景：加载动画、页面过渡、游戏角色等。
animation 配合 @keyframes 实现复杂动画。优势：比 transition 更强大，可以定义多个关键帧。
常用场景：加载动画、页面过渡、游戏角色等。
👇 动画效果演示
脉冲动画
脉冲
旋转动画
旋转
弹跳动画
弹跳
1/* 定义动画 */
2@keyframes pulse {
3 0% { transform: scale(1); }
4 50% { transform: scale(1.1); }
5 100% { transform: scale(1); }
6}
7
8@keyframes spin {
9 from { transform: rotate(0deg); }
10 to { transform: rotate(360deg); }
11}
12
13@keyframes bounce {
14 0%, 100% { transform: translateY(0); }
15 50% { transform: translateY(-20px); }
16}
17
18/* 使用动画 */
19.box {
20 animation: pulse 1.5s infinite;
21}
22
23/* 动画属性 */
24animation: 名称 时长 缓动函数 延迟 次数 方向 填充模式;
25
26/* 常用值 */
27animation: spin 2s linear infinite;
28animation: bounce 1s ease-in-out infinite alternate;