一.steps介绍
steps()是一个timing function(animation中),允许我们将动画或者过渡分割成段,而不是从一种状态持续到另一种状态的过渡。
Steps(<number_of_steps>,<direction>)
两个参数:第一个参数是一个正值,指定动画分割的段数。第二个参数可选,接受 start 和 end 两个值,指定在每个间隔的起点或是终点发生阶跃变化,默认为 end。start 第一帧是动画结束的时候状态; end 第一帧是动画开始的时候状态
这面是示例图:
二.列子
1.steps(4, end)与steps(4, start)的区别
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Steps() Demo - Car</title>
<link href='http://fonts.googleapis.com/css?family=Alegreya+Sans' rel='stylesheet' type='text/css'>
<style>
body,html,div,p,span{margin: 0;padding: 0;}
.both-cars{
border-left: 6px solid #000;
border-right: 6px solid #000;
width: 720px;//4个车子的宽度
height: 300px;
margin: 20px auto;
}
.carbg{
width: 180px;
height: 160px;
position: relative;
animation: drive 4s steps(4, end) infinite;
-webkit-animation: drive 4s steps(4, end) infinite;
}
.carbg-2 {
animation: drive 4s steps(4, start) infinite;
-webkit-animation: drive 4s steps(4, start) infinite;
}
.cartou{
position: absolute;
top: 35px;
left: 50%;
border-radius: 50%;
background: #ed6e46;
width: 100px;
height: 80px;
margin-left: -50px;
}
.cartou-bo{
position: absolute;
left: 15px;
top: 10px;
background: white;
border-radius: 100px 0 0 0;
width: 30px;
height: 30px;
}
.cartou-bo.right{
left: 56px;
transform: rotate(90deg);
}
.carbody{
background:#ed6e46;
border-radius: 100px 100px 10px 10px;
width: 180px;
height: 50px;
position: absolute;
bottom: 40px;
left: 50%;
text-align: center;
color: #fff;;
margin-left: -90px;
}
.rounds{
position: absolute;
bottom: 15px;
left:50%;
width: 140px;
margin-left: -70px;
}
.round.right{
float: right;
}
.round{
width: 50px;
height:50px;
background:#333333;
border-radius: 50%;
display:inline-block;
}
.round:after{
content: '';
position: absolute;
left: 10px;
top: 10px;
background: gray;
border-radius: 50%;
width: 30px;
height: 30px;
}
.round>i{
position: absolute;
left: 18px;
top: 15px;
width: 0;
height: 0;
border-left: 7px dotted transparent;
border-right: 7px dotted transparent;
border-bottom: 15px solid #333333;
z-index: 20;
}
.round>i:after {
content: '';
position: absolute;
left: -7px;
top: 5px;
width: 0;
height: 0;
border-left: 7px dotted transparent;
border-right: 7px dotted transparent;
border-top: 15px solid #333333;
}
.round.right:after{left: 100px;}
.round.right>i{left: 107px;}
@keyframes drive {
to { transform: translateX(720px);}
}
@-webkit-keyframes drive {
to {-webkit-transform: translateX(720px);}
}
</style>
</head>
<body>
<div class="both-cars">
<div class="carbg">
<div class="cartou">
<span class="cartou-bo"></span>
<span class="cartou-bo right"></span>
</div>
<div class="carbody">(4,end)</div>
<div class="rounds">
<span class="round">
<i></i>
</span>
<span class="round right">
<i></i>
</span>
</div>
</div>
<div class="carbg carbg-2">
<div class="cartou">
<span class="cartou-bo"></span>
<span class="cartou-bo right"></span>
</div>
<div class="carbody">(4,start)</div>
<div class="rounds">
<span class="round">
<i></i>
</span>
<span class="round right">
<i></i>
</span>
</div>
</div>
</div>
</body>
</html>
2.兔斯基卖萌:结合background-position
图片有多长(x),只要控制单个的大小,不要计算距离位置,直接最后background-position: 0 -y;然后直接百分之百到这个位置。分几步就让n等于多少。参考上边的end时的用法或者默认状态下的用法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>兔斯基 卖萌</title>
<style type="text/css">
@-webkit-keyframes test {
0% {background-position:0px 0;}
100% {background-position:0px -400%;}
}
@keyframes test {
0% {background-position:0px 0;}
100% {background-position:0px -400%;}
}
.steps{
height:35px;
width:32px;
text-indent: -9999px;
-webkit-animation:test 4s steps(4,end) infinite;
animation:test 4s steps(4,end) infinite;
background:url(http://www.web-tinker.com/share/兔斯基揉脸.png);
}
</style>
</head>
<body>
<div class="steps">兔斯基 卖萌</div>
</body>
</html>
steps(4,end)表示让整个动画在4个关键帧之间切换。这个兔斯基揉脸的图片中包含了4帧,所以这里设置了4。而且我们的动画时长是4s,也就是说每一帧停留1s,这就和普通的GIF动图达到了一样的效果。
图片如下: