网站动画为什么使用animation

在现在的网站建设中动画效果已经成为一个有吸引力网站不必可少的效果了，常见的动画效果都是通过animation或JS来实现的，其中一些简单的无需操作的动画都会使用CSS的animation属性来实现。

网站的动画主要有几个概念：

帧：动画过程中每一幅静止的动画叫做一帧。

帧率：一秒中静止动画的数量，单位为fps。

帧时长：每一幅静止动画的时长，单位为ms。

而通过animation来实现动画效果有三步：

1，声明动画：通过@keyframes来声明一个动画，其作用就是用来定义每一帧的动画，主要用于控制animation的效果。

2，调用动画：通过animation来为对应的元素调用@keyframes声明的动画，使其沿着@keyframes中定义的每一帧动画运行，还可以通过animation来定义播放的一些属性如时间，播放顺序，延时等。

3，触发动画：通过一定的触发方式来触发这些动画效果，可以是默认开启也可以是通过JS控制等。

其中animation是一个复合属性，主要就是用来调用已经声明好的@keyframes动画，其中具体的属性为：

animation-name：用来定义动画的名称，要和@keyframea声明的对应的动画名称相同才能调用对应的动画效果。

animation-duration：用来定义动画的执行时间，动画会在定义的时间内完成，单位为s或ms。

animation-timing-function：用来定义动画的播放曲线，一般来说都是默认值。

animation-delay：用来定义动画的延时播放，单位为s或ms。

animation-iteration-count：用来定义动画的播放次数默认为1，一般设置为infinite指无限播放。

animation-direction：用来定义动画的播放方向，可以设置下一次动画反方向运行。

animation-play-state：用来定义动画是否播放，可以通过JS来进行动态的修改。

animation-fill-mode：用来定义动画完成后是否保留最后一帧的动画，如果不保留都会动画完成后就会返回动画的第一帧，通常用在只执行一次的动画效果中。

总的来说animation的属性还是比较多的，用的次数不多的情况下还是使用具体的某个属性来完成动画效果，使用熟练的话animation还是很方便的。现在大部分的动画效果和动画库也是通过animation来完成的，主要还是要前端开发者自己去具体的想一想这个动画中每一帧的动画走向是怎么样的才能做好一个好的动画使用于网站上。