文章导读：AI 辅助学习前端，包含入门、进阶、高级部分前端系列内容，当前是 CSS 的部分，瑶琴会持续更新，适合零基础的朋友，已有前端工作经验的可以不看，也可以当作基础知识回顾。
动画在网页设计和开发中扮演着重要角色，使用 CSS3 中的动画可以让网页有更加酷炫的效果，并吸引到用户的眼球，今天瑶琴带大家来学习或复习 CSS3 中 动画animation 的使用。
基本语法
animation 过渡的基本语法如下：
animation: name duration timing-function delay iteration-count direction fill-mode play-state;-
name：指定动画的名称，通常是通过@keyframes规则定义的关键帧动画名称。
-
duration：指定动画的持续时间，可以使用秒（s）或毫秒（ms）作为单位。
-
timing-function：指定动画的时间函数，控制动画的速度曲线，常见的包括 ease、linear、ease-in、ease-out 等。
-
delay：指定动画开始之前的延迟时间，同样可以使用秒或毫秒作为单位。
-
iteration-count：指定动画的播放次数，可以使用数字或关键词如infinite（无限循环）。
-
direction：指定动画的播放方向，可以是normal（正常方向）、reverse（反向）、alternate（交替）等。
-
fill-mode：指定动画结束后元素样式的应用方式，如forwards（保持最后帧样式）。
-
play-state：指定动画的播放状态，如running（播放）或paused（暂停）。
创建关键帧动画
要使用animation属性，首先需要创建关键帧动画（Keyframes）。关键帧动画允许指定动画中的不同状态和关键帧。例如：
@keyframes slide {
0% {
transform: translateX(0);
}
50% {
transform: translateX(100px);
}
100% {
transform: translateX(200px);
}
}在上面的示例中，定义了一个名为 slide 的关键帧动画，它在 0%、50% 和 100% 的关键帧上分别定义了元素的位置。
上面创建的关键帧动画可以应用到元素上。通过 animation 属性，将动画绑定到指定元素上，如下：
.element {
width: 100px;
height: 100px;
background-color: #3498db;
/* 使用 "slide" 动画，持续 2 秒，时间函数为 ease-in-out，无限循环 */
animation: slide 2s ease-in-out infinite;
}
这里将 slide 的关键帧动画应用到了一个名为 .element 的元素上。动画持续2秒，使用了 ease-in-out 的时间函数，并无限循环。
多重动画
也可以同时应用多个动画，并为每个动画指定不同的名称、持续时间、时间函数等。这些动画将按照声明的顺序依次播放。
.element {
width: 100px;
height: 100px;
background-color: #3498db;
/* 应用两个动画： "slide" 和 "rotate"，分别持续时间为 2 秒和 3 秒，具有不同的时间函数和无限循环 */
}
animation: slide 2s ease-in-out infinite, rotate 3s linear infinite;
}-
animation 属性将两个动画应用到 .element 元素上，一个是 "slide" 动画，持续时间为 2 秒，使用 ease-in-out 时间函数，无限循环；另一个是 "rotate" 动画，持续时间为 3 秒，使用 linear 时间函数，也是无限循环。
动画事件
CSS3动画还支持动画事件，使用 JavaScript来监听这些事件，在动画的不同阶段执行自定义操作。常见的动画事件包括 animationstart、animationend 和 animationiteration。
var element = document.querySelector('.element');
element.addEventListener('animationstart', function(event) {
console.log('Animation started');
});
element.addEventListener('animationend', function(event) {
console.log('Animation ended');
});
element.addEventListener('animationiteration', function(event) {
console.log('Animation iteration');
});CSS3 动画是前端开发中非常有用的工具，也是前端开发必备的知识储备，它用于创建各种动画效果，从简单的过渡到复杂的动态交互。通过了解动画属性的用法和关键帧动画的创建，随着实践和深入学习，你也可以创建更复杂、更令人印象深刻的动画效果。
希望今天的内容对初学前端的朋友有所帮助。也希望每一个初学者都能成为一个优秀的前端开发工程师，加油。
最后啰嗦一句，好记性不如烂笔头，希望大家在学习的过程中养成做笔记的习惯，形成自己的知识体系。
