第 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 上关注我
里多伊·哈桑
以上就是CSS 动画 – 让元素栩栩如生的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2853838.html
