第 13 讲：css 动画 – 让元素栩栩如生
欢迎来到《从基础到辉煌》课程第13讲！在这篇文章中，我们将探索 css 动画——一种通过随着时间的推移为网页元素添加动画效果的强大方法。借助 css 动画，您可以创建流畅的动态效果，从而增强用户体验和参与度。
1. css 动画概述
css 动画允许元素在定义的时间内在不同样式之间转换。您可以使用两个关键属性来控制动画的工作方式：
- @keyframes：定义动画在特定时刻的行为。
- 动画：将动画应用于元素并控制其时间和持续时间。
2. @keyframes 规则
@keyframes 规则指定元素在动画过程中不同点应具有的样式。您可以以不同的百分比定义关键帧（0% 为开始，100% 为结束）。
- 示例：更改背景颜色的基本关键帧动画。
@keyframes changecolor {
0% {
background-color: red;
}
100% {
background-color: blue;
}
}
在此示例中：
立即学习“前端免费学习笔记（深入）”；
- 背景颜色会随着动画的进行逐渐从红色变为蓝色。
3.使用动画属性应用动画
要将动画应用到元素，可以使用animation 属性。该属性需要几个键值：
- 名称：关键帧动画的名称（例如，changecolor）。
- 持续时间：动画应运行多长时间（例如，2 秒为 2 秒）。
- 计时函数：动画的速度曲线（例如，缓动、线性）。
延迟：开始动画之前等待多长时间。
示例：将动画应用于元素。
.box {
animation: changecolor 2s ease-in-out infinite;
}
在这种情况下：
- .box 元素将在 2 秒内从红色变为蓝色，遵循缓入曲线，并且动画将无限重复。
4.动画计时函数
计时函数控制动画如何随时间进展。一些常见的计时功能包括：
- 线性：动画以恒定速度进行。
- ease：动画开始缓慢，加速，然后减慢。
- ease-in：动画开始缓慢并加速。
ease-out：动画开始时快，然后减慢。
示例：应用不同的计时函数。
.box {
animation: changecolor 3s linear;
}
这里：
- 动画将以恒定速度进行，需要 3 秒才能完成。
5.动画迭代和延迟
您可以使用animation-iteration-count属性控制动画重复的次数。您还可以使用animation-delay来延迟动画的开始。
- 示例：重复 3 次并在 1 秒延迟后开始的动画。
.box {
animation: changecolor 2s ease-in 3;
animation-delay: 1s;
}
在这种情况下：
- 动画将在页面加载后 1 秒开始并重复 3 次。
6.动画填充模式
animation-fill-mode 属性定义元素在动画之前和之后的外观。常见值包括：
- none：动画结束后元素返回到原始状态。
- forwards：元素保留动画的最终状态。
向后：元素在动画开始之前呈现初始状态。
示例：保持动画后的最终状态。
.box {
animation: changecolor 2s ease forwards;
}
这里：
- 动画完成后元素将保持蓝色，而不是恢复为红色。
7.多个动画
您可以将多个动画应用到一个元素，用逗号分隔它们。
- 示例：对颜色和位置进行动画处理。
@keyframes movebox {
0% {
transform: translatex(0);
}
100% {
transform: translatex(100px);
}
}
.box {
animation: changecolor 2s ease, movebox 2s ease-in-out;
}
在这种情况下：
- .box 将改变颜色并同时向右移动 100px。
8.浏览器支持和前缀属性
虽然现代浏览器支持 css 动画，但为旧版本浏览器添加供应商前缀始终是个好主意。
- 示例：添加供应商前缀。
.box {
-webkit-animation: changeColor 2s ease;
-moz-animation: changeColor 2s ease;
animation: changeColor 2s ease;
}
这确保了不同浏览器之间的兼容性。
练习运动
- 使用@keyframes创建弹跳球动画，使球平滑地上下移动。
- 向图像添加动画，使其在悬停时旋转 360 度。
下一步： 在下一课中，我们将探索 css 转换，它允许您平滑地对 css 属性的变化进行动画处理。您将学习如何创建引人入胜的悬停效果和其他增强用户体验的交互。
在 linkedin 上关注我
里多伊·哈桑
