web前端基础——实现动画效果

当两个效果之间变换时，可以使用transition过渡属性，但是有多个效果来回变换时，就需要使用动画效果,且动画过程可控（重复播放，画面暂停，最终画面等）

1、简介

动画的本质是快速切换大量图片在人脑中形成的具有连续性的画面

构成动画的最小单元：帧或者动画帧

2、实现步骤

1. 定义动画

@keyframes 动画名称{
	from{}
	to{}
}

@keyframes 动画名称{
	0%{}
	10%{}
	20%{}
	50%{}
	100%{}
}

第一种代码只能完成两个状态之间的变化，第二种可以完成多种状态的变化，百分比指的是动画时长的占比

2. 使用动画
   animation: 动画名称 动画花费时长;

3、复合属性animation

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

注意：

1. 动画名称和动画时长必须赋值
2. 取值不分先后顺序
3. 如果有两个时间值，第一个表示动画时长，第二个时间表示延迟时间

animation拆分写法

linear 匀速运动

4、动画属性

使用animation-timing-function:step(数字)实现逐帧动画