css3-steps()的动画渐进效果

最新推荐文章于 2023-02-21 10:00:00 发布

QQ_286115751

最新推荐文章于 2023-02-21 10:00:00 发布

阅读量1.3k

点赞数 1

本文链接：https://blog.csdn.net/qq_35515563/article/details/79202194

版权

当我们需要实现一段小的动画视频的效果通常会想到以下的方式实现。

1.gif的动画图；
2.播放视频方式替代h5动画；
3.canvas做绘图动画；
4.js做图片帧轮询来做动画的；
5.css3的steps()做动画渐进效果（过渡方式）。

animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的。除了ease，linear、cubic-bezier之类的过渡函数都会为其插入补间。但有些效果不需要补间，只需要关键帧之间的跳跃，这时应该使用steps过渡方式。

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>hyy测试--steps(x)动画渐进效果</title>
	<meta name="format-detection" content="telephone=no">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
	<style>
		body, html {
			min-width: 320px;
			max-width: 640px;
			height: 100%;
		}
		.index {
			width: 100%;
			height: 100%;
			-webkit-animation:test 1000ms steps(3) infinite;
			animation:test 1000ms steps(3) infinite;
			background:url('https://img-blog.csdn.net/20180130104055505?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMzU1MTU1NjM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast');
			background-size: 100% 300%;
		}
		@-webkit-keyframes test {
			0% {background-position: 0% -0%;}
			100% {background-position: 0% 300%;}
		}
		@keyframes test {
			0% {background-position: 0% -0%;}
			100% {background-position: 0% 300%;}
		}
	</style>
</head>
<body>
	<div class="index"></div>
</body>
</html>

比如GIF动图不支持程序对播放的控制，也不支持Alpha通道。但如果我们用一个PNG图片，把所有帧都放在一起，通过CSS3的animation控制background-position来播放就可以做到这些。

QQ_286115751

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css3-steps()的动画渐进效果

当我们需要实现一段小的动画视频的效果通常会想到以下的方式实现。1.gif的动画图；2.播放视频方式替代h5动画；3.canvas做绘图动画；4.js做图片帧轮询来做动画的；5.css3的steps()做动画渐进效果（过渡方式）。animation默认以ease方式过渡，它会在每个关键帧之间插入补间动画，所以动画效果是连贯性的。除了ease，linear、cubic-be
复制链接

扫一扫