css 加载动画如何生效,CSS 加载动画

CSS加载动画

实现加载动画效果，需要的两个关键步骤：

1、做出环形外观

border:16px solid #f3f3f3;

border-radius:50%;

border-top:16px solid #2e8e9a;

2、使环形转动 animation

动画的实现使用 animation，animation  属性用来指定一组或多组动画，每组之间用逗号相隔，animation是一个简写属性。

每个动画定义中的属性值的顺序很重要：

可以被解析为 时间的值，单位毫秒 ms：

第一个值被分配给 animation-duration(指定一个动画周期时长)，

第二个分配给 animation-delay(从动画应用在元素上到动画开始的这段时间的长度)。

每个动画定义中的值的顺序，对于区分 animation-name 值和其他关键字也很重要。

解析时，对于animation-name 之外的有效的关键字，必须被前面的简写中没有找到值的属性所接受。

此外，在序列化时，animation-name 与以及其他属性值作区分等情况下，必须输出其他属性的默认值。

例如：

animation:load 2s linear infinite;

上面简写代码可以分解为：

animation-name 动画名称为 load；

animation-duration 一个动画周期时长为 2s；

animation-timing-function  在每一动画周期中执行的节奏为 linear；

animation-timing-count 动画在结束前运行的次数为 infinite(无限次数)

注意：使用厂商前缀 -webkit 或是-ms- 用于不支持 animation 和 transform 属性的浏览器。

HTML 代码