目录

一、animation动画的使用步骤

第一步:定义动画

第二步:使用动画

二、animation的复合属性

三、animation的拆分属性

四、动画属性

一、animation动画的使用步骤

第一步:定义动画

//changes为定义的动画名称//①两种状态的变化@keyframes change {from {width: 200px;}to {width: 600px;}}//②多种状态的变化 
 //百分比为动画占总时长的占比@keyframes changes {0% {width: 200px;}50% {width: 500px;height: 300px;}100% {width: 800px;height: 500px;}} 

第二步:使用动画

//给需要调用动画的类名或标签加上animation change为动画名称 1s为动画时长
 .box{animation:change 1s;
 }

二、animation的复合属性

//animation:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态
 //liner为匀速
 animation:change 1s linear
 //step(3) 为分布动画
 animation:change 1s step(3)// 5s为延迟时间 infinite无限 alternate反方向 
 animation: change 1s steps(3) 5s infinite alternate;
 //执行完毕时的状态(最开始backwards,最终forwards) 不能设置重复次数 与 动画方向
 animation:change 1s forwards

三、animation的拆分属性

四、动画属性