一、背景
本文章是用于解释上一篇文章中的问题，如果会动画的小伙伴就不用再次来看了，本文主要讲解一下动画的设定规则，以及如何在元素中添加动画，本文会大篇幅的讲解一下，动画属性。注意，这是css3的内容，默认认为已经了解了css的知识。
二、如何配置动画规则
关于如何定制动画规则，想必看过我的轮播图那篇文章的小伙伴们已经不陌生了，接下来我就简单的说一下如何去定制动画规则。
1、首先动画规则是通过@keyframes 动画名【注意动画名称任意，但是建议见名知意】。
2、在动画名称之后使用花括号来定义相关的规则，例如让盒子的宽高变化，或者是移动元素。
3、定制的阶段可以分为简单的写法，但是有缺点，只能设置开始和结束的状态。
4、另一种就是相对复杂的百分比写法，相对复杂，但是更灵活，建议使用百分比定制，但是还是要根据实际情况选择，这里不做限制。
1、简单写法
@keyframes animation {
from{
元素开始的状态
}
to{
元素目标状态
}
}2、百分比
@keyframes animation {
0%{
状态一【开始状态】
}
25%{
状态二
}
50%{
状态三
}
75%{
状态四
}
100%{
状态五【目标状态】
}
}注意：当使用百分比写法的时候阶段是可以自由拆分的，同样也是根据具体情况具体定制。
三、相关属性介绍
关于属性方面我们先来说一下基本的一些属性，大家肯定有一个疑惑，动画规则有了，但是如何添加到元素上呢，那么接下来就来聊一聊如何去为元素添加动画规则。
1、基本属性使用
1、首先添加动画规则，需要使用animation-name来声明动画的名称，也就是动画规则中的名称。
2、那么动画一定是有时间的，所以接下来了就需要设定时间，时间是通过animation-duration来设定的，值的单位是秒【s】或者毫秒【ms】。
以上就是动画的基本使用，如果你只是想回忆一下自己学过的动画知识，那么想必看到这里已经想起来不少了，如果你是小白，那么继续阅读下去，相信会给你带来不菲的价值。
2、其他属性的使用
刚刚介绍完两个基本的属性，有了以上的两个属性，再加上动画规则，就可以做到一个简单的动画，但是我们的目的也一定不是简简单单的让元素动一下，那和过渡属性又有什么区别呢，那么接下来就一起来看一下，动画的其他有趣的属性。
1、animation-delay
这是一个延时属性，就像是他的字面意思，这个属性会让动画在开始的时候延长一段时间之后，再开始动画的播放，接下来演示一下。
<body>
<div class="box"></div>
</body> <style>
.box {
width: 100px;
height: 100px;
background: orange;
animation-name: moveR;
animation-duration: 2s;
animation-delay: 2s;
}
@keyframes moveR {
0% {
transform: translateX(0);
}
20% {
transform: rotate(360deg);
background: pink;
}
50% {
background: blue;
border-radius: 50%;
}
to {
transform: translateX(1000px);
background: red;
}
}
</style>效果展示：
延迟属性就说到这里。
2、animation-timing-function
这个属性是用来定义过渡形式的，用来固定元素的动画节奏。
选择器 {
animation-timing-function:
ease(慢快慢,默认值)
linear(匀速)
ease-in(先慢后快)
ease-out(先快后慢)
ease-in-out(慢快慢，相对于ease更慢一点)
step-start(不考虑过渡时间直接就是终点)
step-end(过渡时间到直接到终点)
steps(数值)(步长，一段一段的过渡)
cubic-bezier(.88,.54,.35,1.79)贝塞尔曲线这个属性就不做演示喽，把这个机会留给大家，这个属性和transition中的过度形式是一样的。
3、animation-interation-count
这个属性是用来定义动画播放次数的，可以是1次，或者是多次，也有一些固定的属性，例如：infinite，这个属性值的意思就是动画会一直运动。具体使用可以看css—轮播图实现-CSDN博客文章浏览阅读636次，点赞6次，收藏18次。CSS样式来实现图片的切换效果。它不依赖于JavaScript，运行速度较快，并且具有较好的兼容性。
https://blog.csdn.net/m0_64387122/article/details/144049330?spm=1001.2014.3001.5502这篇文章就使用到了这个属性，大家可以去看一下，也是可以学习到一些知识的。
4、 animation-direction
这个属性是用来定义动画的运动方向的
animation-direction: normal(左到右，默认值)/reverse(反向)/alternate(来回滚动)/alternate-reverse(反向来回滚动)
从左到右，和反向，也就是从右到左，就不进行演示了，还是比较好理解的，接下来就来演示一下来回滚动。
接下来我们来看一下代码：
<body>
<div class="box"></div>
</body><style>
.box {
width: 100px;
height: 100px;
background: orange;
animation-name: moveR;
animation-duration: 2s;
animation-iteration-count: 3;
animation-direction: alternate;
}
@keyframes moveR {
0% {
transform: translateX(0);
}
20% {
transform: rotate(360deg);
background: pink;
}
50% {
background: blue;
border-radius: 50%;
}
to {
transform: translateX(1000px);
background: red;
}
}
</style>其中的animation-direction: alternate;属性就是控制元素来回滚动的重要环节。
5、 animation-fill-mode
这个属性是用来定义动画以外的状态，也就是动画最后会停在那里？
结构：
animation-fill-mode: forwards(停止在最后一帧)/backforwards(停止在第一帧)
这里就不延时停在第一帧了，这是默认的。接下来我就来演示一下停止在最后一帧。效果如下：
<body>
<div class="box"></div>
</body><style>
.box {
width: 100px;
height: 100px;
background: orange;
animation-name: moveR;
animation-duration: 2s;
animation-fill-mode: forwards;
}
@keyframes moveR {
0% {
transform: translateX(0);
}
20% {
transform: rotate(360deg);
background: pink;
}
50% {
background: blue;
border-radius: 50%;
}
to {
transform: translateX(1000px);
background: red;
}
}
</style>6、animation-play-state
这个属性是用来定义动画播放状态的。
结构：
animation-play-state: paused(暂停)/running(运行，默认值)
默认值是运行状态的，所以同样不做演示，只演示暂停的使用，搭配hover伪类可以实现交互的效果。效果如下：
<style>
.box {
width: 100px;
height: 100px;
background: orange;
animation-name: moveR;
animation-duration: 2s;
animation-iteration-count: infinite;
animation-direction: alternate;
animation-fill-mode: forwards;
}
@keyframes moveR {
0% {
transform: translateX(0);
}
20% {
transform: rotate(360deg);
background: pink;
}
50% {
background: blue;
border-radius: 50%;
}
to {
transform: translateX(1000px);
background: red;
}
}
.box:hover {
animation-play-state: paused;
}
</style>从效果中可以清楚的看到，当鼠标放在元素上时会静止元素的运动。
四、属性的符合写法
animation: moveR 2s 0.5s linear infinite alternate-reverse;
符合写法就是将之前介绍的属性进行合并使用，也是比较推荐的写法。这个就比较简单了，就不再重复解释了。
五、结语
感谢大家的耐心阅读，希望这篇文章能给您带来一些启发和帮助。如果您有任何疑问或建议，请随时在评论区留言，我会尽快回复，今天的分享就到这里了，如果您觉得这篇文章还不错，请点赞、分享给更多的朋友吧！同时，也欢迎关注我的博客，获取更多精彩内容。