css动画

css动画

关键帧用来指定动画每一步执行的位置

使用动画的步骤

1.通过@keyframs关键字定义动画 注意定义动画是写在元素外面的。

2.在指定的元素中，通过animation调用动画

定义动画

@keyframs 动画名 关键帧。

@keyframs 动画名自定义{
from{
	初始帧
}
to{
	结束帧
}
 }

调用动画以及简写

animation:定义的动画名 完成时间 执行次数 运动曲线 是否反向执行 延迟时间 播放（infinite 表示无限循环）
animation:dh 1s infinite linear alternate 3s running;

属性值的顺序：前两个是必须的，而且顺序不能乱，后面的位置可以互换。

可以进行百分比 这个用的比较多点

将动画通过百分比，分割为多个节点，然后给单个节点分别设置属性。

@keyframs 动画名{
0%{
	初始帧
}
50%{

}
100%{
	结束帧
}
}

一般情况：如果我们不设置开始针或结束帧，默认元素的就是从百分之零到百分之百 开始到结束。

动画的属性

动画用来做一些复杂的动画效果

1、定义的动画名：

animation-name:动画名

动画名不要使用关键字。

2.完成时间
执行一次动画的完成时间,单位是s/ms

animation-duration:2s;

3、动画执行次数

animation-iteration-count：次数不带单位

infinite 表示无限循环

4.运动曲线

animation-timing-function:linear;

属性值：

• linear 线性 默认是匀速。
• ease 减速
• ease-in 加速
• ease-in-out 先加速后减速
• steps 分割成几步执行

5、动画执行的方向

animation-direction:alternate;

属性值：

• normal 正常 默认值 从0%-100%执行
• reverse 反向 结束帧到开始帧 从100%-0%执行
• alternate 交替 alternate会计算执行次数。第一次从0%-100% 第二次从100%-0% 交替

6、动画的延迟时间
单位是s秒名字ms毫秒

animation-delay:3s

7、动画的暂停

暂停 
animation-play-state: paused;
播放 
animation-play-state:running;