css动画效果-animation

目录

一、定义动画

二、复合属性

1.animation语法使用

 2.动画拆分写法:

三、逐帧动画

steps语法使用

四、多组动画

animation属性给一个元素添加多个动画效果

---

本文介绍了使用关键帧动画效果,给网页元素添加动画特效的基础内容,使用animation给网页添加动画效果。

---

一、定义动画

示例：第一种写法。

@keyframes{

​ from{}

​ to{}

​ }

示例：第二种写法。 

@keyframes{

​ 0%{}

​ 20%{}

​ 50%{}

​ 100%{}

}

 代码如下：

这里对以上代码进行效果展示：

二、复合属性

1.animation语法使用

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

提示：取值不分先后顺序 

必须赋值项:

•  动画名称和动画时长
• 若出现2个时间:第一个时间为动画时长,第二个时间为延迟时间

 2.动画拆分写法:

动画使用方式: 

/* linear:匀速 */
animation: change 1s linear;

/* steps(4):分步动画 */
animation: change 1s steps(4);

/* 2s:延迟时间 */
animation: change 1s 2s;

/* infinite:无限循环,数字:表示重复的次数 */
animation: change 1s infinite;
animation: change 1s 3s;

/* alternate:反向 */
animation: change 1s infinite alternate;

/* backwards默认值,动画停留在开始状态 */
animation: change 1s backwards;

/*forwards: 动画停留在结束状态 */
animation: change 1s forwards;

三、逐帧动画

steps语法使用

 steps实现逐帧动画的使用。

animation-timing-function 速度曲线 steps(数字)：逐帧动画

作用:精灵动画 (搭配精灵图使用) 

代码如下（示例）：

animation-timing-function: steps(N)；

注意：动画速度曲线为steps(N) , N与精灵图小图个数相同

四、多组动画

animation属性给一个元素添加多个动画效果

写法:

animation:

动画1,

动画2,

动画N

;