CSS3 animation steps

最新推荐文章于 2023-05-10 14:26:37 发布

Neil-

最新推荐文章于 2023-05-10 14:26:37 发布

阅读量402

点赞数 2

分类专栏： css web前端文章标签： animation steps CSS3 css动画

本文链接：https://blog.csdn.net/luofeng457/article/details/103349520

版权

web前端同时被 2 个专栏收录

98 篇文章 0 订阅

订阅专栏

css

13 篇文章 0 订阅

订阅专栏

背景

css3引入了transition和animation属性为我们提供了强大的动画效果，也为前端设计和实现提供更多的可能性；

需求：利用给定的一组图片，实现动画效果；

优势：纯CSS实现，不需要借助gif；更好的性能表现

Action：借助animation steps实现；

属性介绍

用法：steps(n, <jumpterm>)
steps其实是一个分段的阶跃函数，n相当于单次动画的帧数，每帧动画的时间是均等的；jumpterm用于确定整个动画的每帧的起止位置；比如n=5时，可以为0% 20% 40% 60% 80%，可以为20% 40% 60% 80% 100%，还可以为0% 25% 50% 75% 100%等；具体的情况就是由参数jumpterm决定；
jumpterm的常见取值包括：
- jump-start：左连续函数，在起始位置阶跃；第一帧是已阶跃的位置，（n=5 ⇒ 20% 40% 60% 80% 100%）
- jump-end：右连续函数，在结束位置阶跃，右连续保证其可以和第一帧无缝连接，可以循环播放；第一帧为起始位置，（n=5 ⇒ 0% 20% 40% 60% 80%）
- jump-none：起止位置均无跳跃，（n=5 ⇒ 0% 25% 50% 75% 100%）
- jump-both：起止位置均有跳跃（n=5 ⇒ 16.6% 33.3% 50% 66.6% 83.3%）
- start：同jump-start
- end：同jump-end
  很明显，可以根据属性名就可以区分它们的差异，是否jump以及在起始位置还是结束位置jump都已经指明；

参考下图更利于理解该属性；（下图来自参考文献2）

在这里插入图片描述

demo —— 走马灯

demo演示参见JsFiddle

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
	<style>
		.collapse {
			width: 661px;
			height: 20px;
			background-image: url('./sprites.png');
			background-size: cover;
			background-repeat: no-repeat;
			animation: mymove 5s infinite steps(3, end);
			/* animation: mymove 5s infinite steps(3, jump-none); */ // 使用steps(3, jump-none)
		}

		@keyframes mymove {
			to {
				background-position-x: -1983px;
				/* background-position-x: -1322px; */	// 使用steps(3, jump-none)
			}
		}
	</style>
</head>

<body>
	<div class="collapse"></div>
</body>

</html>

sprites.png
在这里插入图片描述

效果截图：
在这里插入图片描述

如果使用jump-none，则结束位置不会发生阶跃，为达到相同效果，最后一帧应保持为背景图左移1322px而不再是1983px的位置；

如果使用jump-both，则起止位置都会发生阶跃，未达到相同效果，所以两个端点值表示的帧不显示，因此，需要改动部分css：

animation: mymove 5s infinite steps(3, jump-both);

@keyframes mymove {
	from {
		background-position-x: 661px;
	}
	to {
		background-position-x: -1983px;
	}
}

参考文献

Neil-

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
打赏
0
评论
CSS3 animation steps

背景css3引入了transition和animation属性为我们提供了强大的动画效果，也为前端设计和实现提供更多的可能性；需求：利用给定的一组图片，实现动画效果；优势：纯CSS实现，不需要借助gif；更好的性能表现Action：借助animation steps实现；属性介绍用法：steps(n, <jumpterm>)steps其实是一个分段的阶跃函数，n相当于单...
复制链接

扫一扫