CSS的动画的基础概念定义/调用/绑定复习必备

Css动画

首先，我们要了解的是过渡和动画区别，这样可以让我们更深入了了解动画：
过渡：需要触发一个事件才可以执行。
动画：可以不用触发事件直接调用。
言归正传，接下来我们就一起进入动画属性:

Css动画的定义：
基础语法如下：
可是这种基础语法有一定的局限性，只能定义开头和解为的动画，实际操作中我们一般这样用：

ps：图中花括号内的分别为定位的变化和背景颜色的变化。
这种方式定义动画表示每个百分比之间的样式变化，上图内每个百分比区间为一定事件内动画的百分占比，如果动画总时长为10s，那么10%既为1s。
这种方法定义的动画精度更高，逻辑简单，层次感鲜明。

动画的调用

动画创建完成之后，自然需要被元素调用，调用语法：
animation：①被绑定的动画名称 ②动画的播放时间 ③动画播放的次数 ④动画的速度曲线 ⑤动画的延迟开始时间

下面一一对应说明：

①被绑定的动画名称 ：你自己设置的动画名称 必要属性

②动画的播放时间：动画从开始到结束的时间（动画总时长）必要属性

③动画播放的次数：infinite-无限循环播放 alternate(2)-规定次数播放，alternate(2)表示播放两次 非必要属性默认值为1次

④动画的速度曲线:：
linear 匀速
ease-in 慢速开始，快速结束
ease-out 快速开始慢速结束
ease-in-out 慢速-快速-慢速
非必要属性 默认值为ease
⑤动画的延迟开始时间：动画被调用后多久开始动画 非必要属性
补充：动画结束后会回复原来的样式，如果想让动画停留在结束时刻的样式可用forward属性。

如上图，是给 类h-img 绑定动画，绑定动画名称为hdpp 动画持续时间为12s 动画无限循环播放。

好了，今天就到这里了，如有准备复习的重要知识点，可在评论区留言哦~