animation的steps()用法详解

墨蓝 2021-09-14 16:44 614阅读 0赞

一.steps介绍

steps()是一个[timing function][]（animation中），允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。

Steps(<number\_of\_steps>，<direction>)

两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点或是终点发生阶跃变化，默认为 end。start 第一帧是动画结束的时候状态； end 第一帧是动画开始的时候状态

这面是示例图：

![SouthEast][]

二.列子

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动图达到了一样的效果。

图片如下：

![201901091428055.png][]

[timing function]: http://www.w3school.com.cn/cssref/pr_animation-timing-function.asp
[SouthEast]: /images/20210813/e8ae996127cc4260b73a7e7196007e19.png
[201901091428055.png]: /images/20210813/169b064fd6fb4670a3dd3e08b85957da.png