【CSS3】steps() 逐帧动画

本文素材

【数字】700*101
在这里插入图片描述

【2233娘】1000*177
在这里插入图片描述

【剑士】533*54
在这里插入图片描述

【挥手】500*72
在这里插入图片描述


1. 阶梯函数 steps()

steps(number_of_steps, dircection); 是 animation-timing-function 属性的另一种函数值,以帧的方式过渡,可形成定格动画。

参数描述
number_of_steps:阶梯数(正整数),将动画的总时长按照阶梯数等距划分【必需】;
  (默认时,数下图片中有几步动作,就是多少)
direction:设置最后一步的状态;【可选】
  - end:动画以第一步为第一帧开始,再以该步作为最后一帧结束;【默认】
  - start:动画以第二步为第一帧开始,再以第一步作为最后一帧结束;


2. 正序播放与倒序播放

  Tips:
    1. 通过 background-position-x 来设置图片开始与结束的地方(需播放范围),使图片以帧形式过渡,实现逐帧动画;
    2. background-position-x :值增加,即图片起始位置向左移动,值减少,即图片起始位置向右移动;

  • 第一种:@keyframes 规则中,控制 background-position-x 起始位置向左【正】或向右【负】过渡(水平帧):
    在这里插入图片描述

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.pic {
			width: 70px;
			height: 101px;
			background-image: url('https://img-blog.csdnimg.cn/20200803180945989.png');
		}
		.demo1 {
			animation: mover1 5s steps(10);
		}
		.demo2 {
			animation: mover2 5s steps(10);
		}

		/* 倒序 */
		@keyframes mover1 {
			from {background-position-x: 0;}
			to {background-position-x: 700px;}
		}

		/* 正序 */
		@keyframes mover2 {
			from {background-position-x: 0;}
			to {background-position-x: -700px;}
		}
	</style>
</head>
<body>
	<h3>background-position-x 均为正数;(10+1 帧)</h3>
	<div class="demo1 pic"></div>
	<hr />
	<h3>background-position-x 均为负数;(10+1 帧)</h3>
	<div class="demo2 pic"></div>
</body>
</html>
  • 第二种:@keyframes 规则中,background-position-x 的大值在 “from”,小值在 “to”(水平帧)【第一种也是这个道理】:

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.pic {
			width: 70px;
			height: 101px;
			background-image: url('https://img-blog.csdnimg.cn/20200803180945989.png');
		}
		.demo1 {
			animation: mover1 5s steps(10);
		}
		.demo2 {
			animation: mover2 5s steps(10);
		}

		/* 正序 */
		@keyframes mover1 {
			from {background-position-x: 700px;}
			to {background-position-x: 0px;}
		}

		/* 倒序 */
		@keyframes mover2 {
			from {background-position-x: -700px;}
			to {background-position-x: 0px;}
		}
	</style>
</head>
<body>
	<h3>background-position-x: from > to(10+1 帧)</h3>
	<div class="demo1 pic"></div>
	<hr />
	<h3>background-position-x: from < to(10+1 帧)</h3>
	<div class="demo2 pic"></div>
</body>
</html>


3. 【对照 - end 和 start】

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		.pic {
			width: 70px;
			height: 101px;
			background-image: url('https://img-blog.csdnimg.cn/20200803180945989.png');
		}
		.demo1 {
			animation: mover 5s steps(10, end);
		}
		.demo2 {
			animation: mover 5s steps(10, start);
		}
		@keyframes mover {
			from {background-position-x: 0;}
			to {background-position-x: -700px;}
		}
	</style>
</head>
<body>
	<h3>end:【默认】以第一步作为第一帧开始, 再以此步结束;(10+1 帧)</h3>
	<div class="demo1 pic"></div>
	<hr />
	<h3>start:以第二步作为第一帧开始, 第一步作为最后一帧结束;(10 帧)</h3>
	<div class="demo2 pic"></div>
</body>
</html>


4. 其他 Demo

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<style type="text/css">
		/* 2233 娘 */
		.pic1 {
			width: 65px;
			height: 90px;
			background: url('https://img-blog.csdnimg.cn/20200803191932146.png') -40px -45px;
			animation: mover1 0.6s infinite steps(7);
			-webkit-animation: mover1 0.6s infinite steps(7);
		}
		@keyframes mover1 {
			0% {background-position-x: -40px;}
			100% {background-position-x: -1040px;}
		}
		@-webkit-keyframes mover1 {
			0% {background-position-x: -40px;}
			100% {background-position-x: -1040px;}
		}

		/* 剑士 */
		.pic2 {
			width: 88px;
			height: 54px;
			background: url('https://img-blog.csdnimg.cn/20200803192124295.png');
			animation: mover2 1s infinite steps(6);
			-webkit-animation: mover2 1s infinite steps(6);
		}
		@keyframes mover2 {
			0% {background-position-x: -1px;}
			100% {background-position-x: -533px;}
		}
		@-webkit-keyframes mover2 {
			0% {background-position-x: -1px;}
			100% {background-position-x: -533px;}
		}

		/* 挥手 */
		.pic3 {
			width: 45px;
			height: 66px;
			background: url('https://img-blog.csdnimg.cn/20200803192202686.png') 0 -3px;
			animation: mover3 1.5s infinite steps(10);
			-webkit-animation: mover3 1.5s infinite steps(10);
		}
		@keyframes mover3 {
			0% {background-position-x: -4px;}
			100% {background-position-x: -504px;}
		}
		@-webkit-keyframes mover3 {
			0% {background-position-x: -4px;}
			100% {background-position-x: -504px;}
		}
	</style>
</head>
<body>
	<div class="pic1"></div>
	<div class="pic2"></div>
	<div class="pic3"></div>
</body>
</html>

相关传送

a. 菜鸟教程 - Tmiracle 的笔记

b. 小胖儿不想动 - animation中的steps()逐帧动画

c. 车大棒 - 浅谈CSS3动画的凌波微步--steps()

©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页