【无标题】

制作炫酷小冬瓜
炫酷小冬瓜
咱们小组最后让交一个炫酷的小动画，那我就写呗，也不会太难，有自由发挥的空间。
一开始我就跟着进度学习，觉得跟着进度学习咋样最后还不做一个动画，但是最后写动画的时候还是自己想不出来。
那我就总结一下最近学的知识点吧。
首先得定义一个动画，样式就是
@keyframe 动画名{
0%(from){
样式
}
100%(to){
样式
}
}
看着样式挺简单的，但每一步真的是细节满满啊，
动画的播放时间是animation-duration；
动画播放次数 infinite 表示无限次数；
动画的播放控制 播放running(默认值) 暂停:paused;
animation-play-state: paused;
当然喽 这个paused一般和咱们hover属性连用；
还有animation-timing-function属性，描述的是动画的速度曲线；
linear：线性过渡。ease-in：由慢到快。ease-out：由快到慢。ease-in-out：由慢到快再到慢。。step-start：等同于 steps(1, start) step-end：等同于 steps(1, end)
animation-fill-mode:forwards：设置对象状态为动画结束时的状态,backwards：设置对象状态为动画kai始时的状态.both：设置对象状态为动画结束或开始的状态。
animation-direction:检索或设置对象动画在循环中是否反向运动。默认值是normal ，还可以设置 alternate ，表示物体反向运动。
然后咱们动画的顺序是animation: name duration timing-function delay iteration-count direction fill-mode;
也就是 名字 持续时间 速度曲线 延时 循环次数 是否往返运动 开始结束的位置 。。。。

标签：动画,ease,无标题,paused,animation,炫酷,播放
来源： https://blog.csdn.net/qq_63651140/article/details/122009769