[游戏开发]动画animation

重复播放

最终播放

是否暂停

即需要实现页面动态效果，动画的本质是快速切换大量图片时在人脑中形成的具有连续性的画面，构成动画的最小单位：帧或者动画帧。

动画的使用方法

首先定义动画，一共有两种方法

1：@keyframes 动画名称{

from{}

to{}

}

初始状态到最终状态

2：@keyframes 动画名称{

0%{}

10%{}

15%{}

100%{}

}

中间有好几个状态要过渡

接下来使用动画

在类里加上animation： 动画名称：animation-name 时间：animation-duration

注意，定义动画和使用动画都写在style里

animation：动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时状态

动画名称和动画时长必写

取值顺序不分先后

如果有两个时间 第一个是动画时长，第二个是延迟时间

速度曲线：linear ：匀速 steps（）：分步执行 animation-timing-function

延迟时间：让动画等一会再执行animation-delay

重复次数：infinite：无限循环animation-iteration-count

动画方向 alternate：反向animation-direction

执行完毕时状态 无限循环与执行完毕时状态冲突 backwards：默认值，未播放时是什么状态就是forwards的值 forwards：动画执行完毕时的状态animation-fill-mode

暂停动画：animation-play-state paused，配合hover使用

多组动画

如果from状态与初始状态相同，则可以省略不写from 可以直接写to 或者100%