CSS 动画：加载动画
✏️ Editable
Loading...
Live Preview
⌘+Enter Run⌘+R Reset
About This Exercise
在这个实验中，你将学习 CSS 动画，为页面添加生动的交互效果。
CSS 提供了两种主要的动画方式：transition（过渡）和 animation（关键帧动画）。
你将学到：
- 使用
transition创建平滑的状态过渡 - 使用
transform进行变换（旋转、缩放、位移） - 使用
@keyframes创建复杂动画 - 控制动画的时间、延迟和重复
Intermediate⏱ 20-25 min
Learning Objectives
- 理解 transition 和 animation 的区别
- 掌握 transform 的各种变换函数
- 学会编写 @keyframes 动画
- 理解动画性能优化
Scenario
你正在为一个 Web 应用创建加载状态指示器。
设计要求：
- 创建一个旋转的加载圆环
- 动画需要流畅、不卡顿
- 支持不同大小和颜色
- 页面加载时自动播放
Why Do This
- CSS is fundamentally about constraining layout and visual hierarchy, not memorizing properties.
- Clarify the box model and layout rules first, then add visual polish — less rework that way.
- Writing styles as reusable patterns is more valuable than tweaking a single page.
Hands-on Practice
- Write the layout skeleton first (display/gap/align), then add colors and shadows.
- Extract repeated styles into reusable classes.
- Use validation rules to reverse-engineer the design intent of your current styles.
Common Mistakes
- Adding margin after margin to fix positioning while ignoring layout containers.
- Selectors nested too deep, causing style coupling.
- Only caring about how it looks without considering maintainability.
Deliverable
A reusable component style template (layout rules + visual rules + naming conventions).
My Progress
Completed Steps0 / 4
Total Attempts0
Best Score0%
Completion Criteria (Checkable)
Confirm before completing this Lab
Reflection Questions (Recommended)
What was your main layout decision? Why did you choose it?
What change did you make specifically for maintainability?
What would you prioritize improving next time?
Tags
CSSAnimationTransitionKeyframes