一、核心知识点

CSS动画基础：无需JavaScript，通过CSS实现动画效果
关键帧（@keyframes）：
- 定义动画的起始（from/0%）和结束（to/100%）状态
- 支持多关键帧（如30%、50%、70%）定义复杂动画
animation属性（复合属性）：
- animation-name：绑定关键帧名称
- animation-duration：动画持续时间（s/ms）
- animation-delay：延迟时间
- animation-iteration-count：迭代次数（infinite为无限循环）
- animation-direction：动画方向（normal/reverse/alternate）
- animation-timing-function：速度曲线（ease/linear/ease-in-out）
- animation-fill-mode：动画结束后状态（forwards保持结束状态）
transition过渡：
- 语法：transition: 属性时长速度曲线延迟
- 适用于状态变化（hover/click等）的平滑过渡
transform变换：
- translate(x,y)：平移
- rotate(angle)：旋转（单位deg）
- scale(x,y)：缩放
- skew(x,y)：倾斜
- matrix()：综合变换

二、实操实例

实例名称

产品展示动画页（含基础动画+响应式过渡优化）

实例目标

实现图片淡入、按钮hover动画、滚动动画、元素变换等效果，同时优化响应式页面的过渡体验。

三、详细实现步骤

📁 步骤1：创建文件结构

lesson5/
├── index.html
└── css/
    └── style.css
                

📄 步骤2：编写HTML结构

<!-- 完整HTML结构见下方演示区 -->
<!-- 核心结构包含：头部、五种动画演示区、页脚 -->
                

产品展示动画页

CSS动画+过渡效果演示

1. 淡入动画

2. hover变换动画

旋转

缩放

平移

倾斜

3. 滚动触发动画

滚动到此处时触发动画

4. 响应式过渡优化

项目1

项目2

项目3

项目4

5. 按钮交互动画

🎨 步骤3：编写CSS样式（关键部分）

/* 实例样式已整合在页面中，此处为核心动画定义 */
/* 淡入动画 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}
.fade-in-box img {
    animation: fadeIn 2s ease-in-out forwards;
    opacity: 0;
}

/* hover变换 */
.transform-item { transition: all 0.3s ease; }
.rotate-item:hover { transform: rotate(360deg); background-color: #e74c3c; }
.scale-item:hover  { transform: scale(1.2); background-color: #2ecc71; }
.translate-item:hover { transform: translate(20px, -10px); background-color: #f39c12; }
.skew-item:hover { transform: skew(10deg, 5deg); background-color: #9b59b6; }

/* 脉冲动画 */
@keyframes pulse {
    0% { transform: scale(1); opacity: 1; }
    70% { transform: scale(1.3); opacity: 0; }
    100% { transform: scale(1); opacity: 0; }
}
.pulse-btn::before { animation: pulse 2s infinite; }

/* 响应式网格 */
.responsive-box {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    transition: all 0.5s ease;
}
@media (max-width: 992px) { .responsive-box { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .responsive-box { grid-template-columns: 1fr; } }
                

▶️ 步骤4：运行与验证

打开 index.html 文件
验证5种核心动画效果：
- 淡入动画：页面加载时图片从下往上淡入
- 变换动画：鼠标hover时元素实现旋转、缩放、平移、倾斜
- 滚动动画：滚动到对应区域时元素缩放显示
- 响应式过渡：调整窗口大小时，项目布局平滑切换（4列→2列→1列）
- 按钮动画：点击按钮有扩散效果，脉冲按钮持续呼吸动画
测试响应式适配：在移动端或模拟器中查看布局切换的平滑过渡

四、关键注意事项

animation 需要配合 @keyframes 定义动画，transition 适用于状态变化的平滑过渡。
transform 变换不会影响其他元素的布局（不脱离文档流）。
动画持续时间建议设置在0.3-1s之间，避免过快或过慢。
使用 animation-fill-mode: forwards 可以让动画结束后保持最后一帧状态。
响应式过渡需在容器和子元素都设置 transition，确保布局切换平滑。
避免同时使用过多复杂动画，可能影响页面性能。