# 实战案例

URL: https://caijiao.org/css/09-animation/04-case
Source: docs/css/09-animation/04-case.md
Description: 通过 CSS 动画实战案例，掌握关键帧与动画属性的组合使用，制作交互性强、视觉吸引力高的动态效果。

本案例结合 `@keyframes` 和多种动画属性，构建一个动效卡片交互组件，模拟页面加载或提醒提示。

## 目标

- 使用 `@keyframes` 定义动画
- 控制动画时长、循环、延迟与方向
- 利用 `hover` 和 `infinite` 增强互动体验

## 动画实战示例

[在线代码演示](/css/demos/26.html)