animation的steps()用法详解

最新推荐文章于 2024-05-02 11:39:44 发布

面条请不要欺负汉堡

最新推荐文章于 2024-05-02 11:39:44 发布

阅读量8.8k

点赞数 2

分类专栏： css3 文章标签： animation的steps用法详解

本文链接：https://blog.csdn.net/gao_xu_520/article/details/79263408

版权

css3 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

图片如下：

面条请不要欺负汉堡

关注

2
点赞
踩
6

收藏

觉得还不错? 一键收藏
2
评论
animation的steps()用法详解

一.steps介绍steps()是一个timing function（animation中），允许我们将动画或者过渡分割成段，而不是从一种状态持续到另一种状态的过渡。Steps(&lt;number_of_steps&gt;，&lt;direction&gt;)两个参数：第一个参数是一个正值，指定动画分割的段数。第二个参数可选，接受 start 和 end 两个值，指定在每个间隔的起点...
复制链接

扫一扫