CSS动画

和过渡不同，动画是需要定义规则的，并且可以有多个关键帧，而且动画可以实现自动播放，多次播放的效果。

选择器 {
  animation: 动画规则名 动画时长 动画曲线 动画延迟时间 动画次数 动画方向 动画填充模式 动画的状态;
}

想要实现一个动画，我们必须先创建动画的规则

@keyframs 自定义名字 {
  
}

在规则中，有对应的写法

@keyframs 自定义名字 {
  0% {}
  n% {}
  100% {}
}

n代表的是数字，可以有很多个。在百分比后面的大括号中，我们需要写对应的样式。

也可以把0%替换成from，把100%替换成to

@keyframs 自定义名字 {
  from {}
  n% {}
  to {}
}

同时规则中支持，对应的某些百分比样式相同的情况下，可以直接写在一起

@keyframs 自定义名字 {
  from {}
  10%, 80% {}
  to {}
}

animation-name

表示动画名称，需要通过@keyframs创建

animation-duration

动画时常，单位为s，定义动画执行的时间

animation-timing-function

动画曲线，和过渡效果中的曲线一致，可以使用ease ease-in ease-out ease-in-out linear 或者 自定义的贝塞尔曲线。

animation-delay 动画延迟

一般都为正值，表示等待多少秒后开始执行动画，负值表示跳过对应动画的前n秒执行动画

动画延迟可以让我们整个动画更加有节奏性

animation-fill-mode

默认值为none 有四个值

• none
• forwards 表示当动画结束后，我们对应的元素保持在动画结束时的样式里。
• backwards 表示在开始动画时，如果有延迟时间，不加backwards则会停留在对应的初始样式上等待，开始后，闪到0%的样式，而添加该属性后，动画会从0%的样式开始等待。
• both 一般我们使用both

animation-iteration-count

动画次数，写几次就执行几次，如果要无限执行，可以使用 infinite

• 数字 表示多少次
• infinite 无限次
• 如果是小数，则按照比例执行到对应的动画位置

animation-direction

控制动画方向，正常动画从0% - 100%，如果设置该属性可以控制动画的播放顺序

• alternate 奇数次执行 0%-100% 偶数次执行100%-0%
• alternate-reverse 偶数次次执行 0%-100% 奇数次执行100%-0%
• normal 默认值

animation-play-state

• running
• paused

这个属性通常是通过js控制，用来控制元素动画的执行和暂停效果的。

animate.css

有人用自己的想法完成了一个动画库——animate.css。通过这个动画库，我们可以实现对应的动画效果。

本质上这个动画库中是由别人写了很多的动画规则

我们在使用时，只需要添加相关的类名即可让元素产生对应的动画效果。

<标签 class="animate__animated animate__动画名"></标签>

Animate.css | A cross-browser library of CSS animations.

动画名可以在上面的网站里找到，比如我们想要产生一个动画

复制对应的类名，然后粘贴到对应的位置

<标签 class="animate__animated animate__shakeX"></标签>

我们的页面上的元素就会产生动画效果。

步进动画

我们可以通过步进动画实现复杂的动画效果，精灵动画效果。利用精灵图实现的动画效果。

我们可以使用steps作为动画曲线的属性值

过渡效果和动画都支持步进

套路

量一下对应的精灵的图总宽度，除以移动多少张小图片

总宽度是2000px，一共10张图，那么我们写的时候

@keyframs 自定义名字 {
  0% {
    background-position: 0 0;
  }
  
  100% {
    /*总宽度是多少，就写-多少px*/
    background-position: -2000px 0;
  }
}

然后定义对应的动画 一共有多少张图，我们就在steps中写几

选择器 {
  animationg: 动画名字 动画时常 steps(10);
}