目录
一、定义动画
二、复合属性
1.animation语法使用
2.动画拆分写法:
三、逐帧动画
steps语法使用
四、多组动画
animation属性给一个元素添加多个动画效果
本文介绍了使用关键帧动画效果,给网页元素添加动画特效的基础内容,使用animation给网页添加动画效果。
一、定义动画
示例：第一种写法。
@keyframes{
from{}
to{}
}
示例：第二种写法。
@keyframes{
0%{}
20%{}
50%{}
100%{}
}
代码如下：
<head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>动画</title><style>.box {width: 200px;height: 100px;background-color: pink;animation: change 1s;}@keyframes change {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}}</style></head><body><div class="box"></div></body>
这里对以上代码进行效果展示：
二、复合属性
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
;
