动画
过度是可以实现2个状态间变化的过程
- 动画效果：实现多个转台间的变化过程，动画过程可控(重复播放，最终画面，是否暂停)
动画实现步骤
- 定义步骤：
@keyframes 动画名称{
from {}
to{}
}
或
@keyframes 动画名称{
0%{}
10%{}
15%{}
100%{}
}
2.使用动画
animation:动漫名称 动漫花费时长; 使用在父级盒子上
动画属性
注意：
-
动漫名称和动漫时长必须赋值
-
取值不分先后顺序
-
如果有2个时间值，第一个时间表示动画时长，第二时间表示延迟时间
如何使用animation相关属性控制动画执行过程
使用steps实现逐帧动画
一般照片有多少帧 就填入多少数值
-
逐帧动画开发中 一般配合精灵图实现动画效果。
-
animation-timing-function:steps(N); 将动画过程分成N等分
-
l 精灵动画制作步骤
Ø 准备显示区域
Ø 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
Ø 定义动画
Ø 改变背景图的位置（移动的距离就是精灵图的宽度）
Ø 使用动画
Ø 添加速度曲线steps(N)，N与精灵图上小图个数相同
Ø 添加无限重复效果
-
多组动画
-
思考：如果想让小人跑远点，改如何实现?
精灵动画的同时添加盒子位移动画
- 精灵动画制作步骤
Ø 准备显示区域
Ø 设置盒子尺寸是一张小图的尺寸，背景图为当前精灵图
Ø 定义动画
Ø 改变背景图的位置（移动的距离就是精灵图的宽度）
Ø 使用动画
Ø 添加速度曲线steps(N)，N与精灵图上小图个数相同
Ø 添加无限重复效果
思考：如果想让小人跑远一些，该如何实现？
Ø 答：精灵动画的同时添加盒子位移动画
代码如下：
<style>
.box{
width: 1680px;
height: 140px;
/* border: 1px solid #000; */
}
.box div{
width: 140px;
height: 140px;
background: url(./bg.png);
/* 多组动画 直接调用 */
animation: change 3s infinite steps(12),
run 5s infinite;
}
@keyframes change {
from{
/* 精灵图移动位置bp */
/* 逐帧动画 */
background-position: 0 0;
}
to{
background-position: -1680px 0;
}
}
/* 定义盒子移动动画 */
@keyframes run {
from{
transform: translateX(0);
}
to{
transform:translateX(800px);
}
}
/* */
</style>
走马灯案例
目标：使用animation实现逐帧图片位移效果
<style>
.box{
width: 1440px;
height: 270px;
border: 5px solid #000;
/* 溢出隐藏 */
overflow: hidden;
}
.box-two{
width: 4800px;
height: 270px;
/* linear 匀速 */
animation: move 5s infinite linear;
}
@keyframes move {
/* 加上三张图片的宽度 让其不出现间隔空白 */
to{
transform: translateX(-3360px);
}
}
img{
float: left;
}
</style>
</head>
<body>
<div class="box">
<div class="box-two">
<img src="./1.jpg" alt="">
<img src="./2.jpg" alt="">
<img src="./3.jpg" alt="">
<img src="./4.jpg" alt="">
<img src="./5.jpg" alt="">
<img src="./6.jpg" alt="">
<img src="./7.jpg" alt="">
<img src="./1.jpg" alt="">
<img src="./2.jpg" alt="">
<img src="./3.jpg" alt="">
</div>
</div>
