目录
一、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:动画名称 动画时长 速度曲线 延迟时间 重复次数 动画方向 执行完毕时的状态
//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的拆分属性
四、动画属性
- 逐帧动画(配合精灵图使用)animation-timing-function:step(N) N为将动画分成N份(与精灵图的小图个数相同)
- 多组动画 animation:动画1,动画2,动画N (用逗号隔开)
-
.box { width: 140px; height: 140px; background-image: url(./images/bg.png); /* 跟多个动画用逗号隔开 */ animation: run 1s steps(12) infinite, moves 1s forwards; } /* 定义动画 */ @keyframes run { /* 背景图改位置 从0的位置到图片的最大宽度*/ from { background-position: 0 0; } to { /* 往左挪时负的 */ background-position: -1680px 0; } } /* 定义盒子移动的动画 */ @keyframes moves { /* 如果最初始的动画开始样式可以省略from */ from { transform: translateX(0); } to { transform: translateX(800px); } }