课程进度 23% · 第5/20章第5/20章 · 标签 1/2
— 1 —
动画基础
- CSS动画用于实现元素的动态效果，提升用户体验
- 常用方式：transition（过渡）、animation（关键帧动画）
- 优势：无需JS即可实现大部分动画，性能较好
transition 过渡
transition用于在状态变化时平滑过渡，如hover效果。
- 指定属性、时长、缓动函数、延迟
- 简写：transition: all 0.3s ease
```css
/* 过渡效果 */
.button {
background: blue;
color: white;
transition: all 0.3s ease;
}
.button:hover {
background: darkblue;
transform: scale(1.05);
}
```
css
1
/* 过渡效果 */
2
.button {
3
background: blue;
4
color: white;
5
transition: all 0.3s ease;
6
}
7
.button:hover {
8
background: darkblue;
9
transform: scale(1.05);
10
}
— 2 —
animation 关键帧动画
animation通过@keyframes定义动画序列，可实现复杂动画效果。
- 定义关键帧：@keyframes name { 0% { } 100% { } }
- 应用动画：animation: name 2s infinite
```css
/* 关键帧动画 */
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-20px); }
}
.ball {
animation: bounce 1s ease infinite;
}
```
css
1
/* 关键帧动画 */
2
@keyframes bounce {
3
0%, 100% { transform: translateY(0); }
4
50% { transform: translateY(-20px); }
5
}
6
.ball {
7
animation: bounce 1s ease infinite;
8
}
淡入淡出动画
```css
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.fade-in { animation: fadeIn 0.5s ease; }
```
css
1
@keyframes fadeIn {
2
from { opacity: 0; transform: translateY(20px); }
3
to { opacity: 1; transform: translateY(0); }
4
}
5
.fade-in { animation: fadeIn 0.5s ease; }
transitionanimationkeyframeshovertransform