雪碧图实现GIF效果

作者 Simmin 日期 2017-03-24
雪碧图实现GIF效果

一、前言

关键点:

  1. 雪碧图
  2. background-position
  3. steps

利用background-position控制雪碧图起始位置来选择索要呈现的内容,这个已经很熟悉了。那么steps是什么?

二、animation回顾

  1. animation-name: keyframe 名称
  2. animation-duration:动画时间(ms或s)
  3. animation-timimg-function:动画的速度曲线
  4. animation-delay:动画开始之前的延迟
  5. animation-iteration-count:动画播放的次数
  6. animation-direction:是否轮流反向播放动画

steps()便是animation-timing-function属性中的一个取值。

不同于ease、linear等连续型函数,steps指定的是一个阶跃函数。

三、steps介绍

steps()有两个参数

第一个参数n为动画间隔数,也就是把动画分为n步进行阶段性展示;

第二个参数有两个取值,end和start

a) end为默认取值,表示第一帧是第一步动画开始

b) start表示第一帧是第一步动画结束

盗张图:

本文测试代码

<!DOCTYPE html>
<body>
<div class="row-box-group">
<div class="row-box">
<div class="box-item">
<div class="move-item move1"></div>
</div>
<div class="box-item">
<div class="move-item move2"></div>
</div>
</div>
<div class="row-box">
<div class="box-item">
<div class="move-item move3"></div>
</div>
<div class="box-item">
<div class="move-item move4"></div>
</div>
</div>
<div class="row-box">
<div class="box-item">
<div class="move-item move5"></div>
</div>
<div class="box-item">
<div class="move-item move6"></div>
</div>
</div>
</div>
</body>
@keyframes move {
0% {
background-position: 0 -0%;
}
100% {
background-position: 0 -400%;
}
}
@keyframes move2 {
0% {
background-position: 0 0;
}
50%{
background-position: 0 -200%;
}
100% {
background-position: 0 -400%;
}
}
.row-box-group {
margin: 200px auto;
width: 200px;
}
.row-box {
width: 200px;
height: 100px;
box-sizing: border-box;
display: flex;
}
.box-item {
width: 50%;
height: 100%;
border: 1px solid #ddd;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.move-item {
height: 35px;
width: 32px;
background: url(tuski.png);
}
/*不加steps*/
.move-item.move1 {
animation: move 400ms infinite;
}
/*修改steps中的数值*/
.move-item.move2 {
animation: move 400ms steps(4) infinite;
}
/*验证steps中数值目标*/
.move-item.move3 {
animation: move2 400ms steps(4) infinite;
}
.move-item.move4 {
animation: move2 400ms steps(2) infinite;
}
/*steps中end和start的区别*/
.move-item.move5 {
animation: move 400ms steps(4, end) infinite;
}
.move-item.move6 {
animation: move 400ms steps(4, start) infinite;
}

最后效果图:

更多使用案例:【译】css动画里的steps()用法详解

参考:

1.CSS3 animation的steps方式过渡

2.CSS3 timing-function: steps() 详解

3.animation中的steps()逐帧动画