CSS 动画中，怎么使用 steps() 方法

willandjoe

于 2024-08-06 04:13:50 发布

阅读量56

点赞数

文章标签： css 前端

原文链接：How to use steps() method in CSS Animations ? - 原文作者 nikhilkalburgi

本文采用意译的方式

steps() 方法是动画属性一个时间方法，它将一个动画分为 n 个步骤，在相同的间隔时间内展示每一步。比如，如果 n 是 2 ，则它将动画分为两个部分。它将时间从 0% 到 100% 分为各自的 0% 到 50% 和 50% 到 100%。

语法：

上面语法中：

n：在动画的开始和结束直接分成 n 分

jumpterm：它表明 step 函数的行为，它有下面的可能值：

jump-start/start：表明当动画开始时候，第一个跳动发生（表示跳过第一帧）
jump-end / end：表明当动画结束时候，最后一个跳动发生（表示跳过第二帧）
jump-none：表示在动画 0% 和 100% 处，对象都会保持静止，每个时间点的持续时间为总时长的 1/n（表示都不跳过）
jump-both：包括在 0% 和 100% 处的暂停，实际上在动画进展过程中添加了一个步骤（表示跳过第一正帧和最后一帧）

为了更详细理解，下面是译者加至图标👆

对应的官方效果，可以看这里 developer.mozilla.org/en-US/docs/…

下面是另外一个简单的图标解说👇

图像来源于【译】css动画里的steps()用法详解。

说明：

start 表示一个左 - 持续函数，在动画开始时，动画的第一段将会立马完成。以左侧端点为起点，立即跳到第一个 step 的结尾处，保持状态到直到第一步的持续时间结束。后面每一帧都按照这个模式来完成动画。
end 表示一个右 - 持续函数。在动画开始时，保持当前状态，直到该步骤的持续时间结束。

另一个更直观和详细的解说，可以参考如何理解 CSS step 函数中的 jump-* 关键词？的图解。

👆

下面是实现的两个例子👇

例子1：在这个例子中，我们将创建 2 个滑动条，一个没有 steps() 然后另外一个有 step()。这个例子将帮助我们识别它们的不同。

<!DOCTYPE html>
<html>

<head>
	<title>
		How to use steps() method in CSS Animations ?
	</title>

	<style>
		.bar1 {
			width: 10%;
			height: 40px;
			margin: 2%;
			border: solid;
			background: blue;
			animation: play 2s infinite;
		}

		.bar2 {
			width: 10%;
			height: 40px;
			margin: 2%;
			background: green;
			border: solid;
			animation: play 2s steps(10, end) infinite;
		}

		@keyframes play {
			100% {
				width: 90%
			}
		}
	</style>
</head>

<body>
	<h1 style="color:green;">
		GeeksforGeeks
	</h1>

	<h3>
		How to use steps() in CSS Animations?
	</h3>

	<div class="bar1"></div>
	<div class="bar2"></div>
</body>

</html>

输出：在这个例子中，我们有两个滑动条（蓝色和绿色）。蓝色滑动条没有 steps 方法，而绿色有 steps 方法。滑动条在 2 秒内滑动。在绿色案例的滑动条中，间隔的 2 秒时间分为 10 个停顿点，因此图形会在 10 个停顿点上扩展。

例子2：在这个案例中，我们将创建一个时钟，一个带有 steps()，另一个没有带 steps()。这个时钟目前只是展示秒针。案例中的左侧时钟的秒针是 60 秒持续不断旋转（是一个平滑的过渡效果），而在右侧的时钟，秒针完成一圈需要 60 次停顿。

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

<head>
	<style>
		.demo {
			width: 500px;
			display: flex;
			justify-content: space-between;
		}

		.demo .circle {
			width: 120px;
			height: 120px;
			border: solid;
			border-radius: 50%;
			position: relative;
		}

		@keyframes circle {
			from {
				transform: rotate(90deg);
			}

			to {
				transform: rotate(450deg);
			}
		}

		@keyframes circle {
			from {
				transform: rotate(90deg);
			}

			to {
				transform: rotate(450deg);
			}
		}

		.demo .pin {
			height: 2px;
			position: absolute;
			top: 50%;
			transform-origin: 100% 50%;
			width: 50%;
			background-color: blue;
			animation: circle 60s steps(60) infinite;
		}

		.demo .without_step .pin {
			animation: circle 60s linear infinite;
		}
	</style>
</head>

<body>
	<h1 style="color:green;">
		GeeksforGeeks
	</h1>

	<h3>How to use steps( ) in CSS Animations?</h3>

	<div class="demo">
		<section class="without_step">
			<h3>Without Steps</h3>
			<div class="circle">
				<div class="pin"></div>
			</div>
		</section>
		<section class="with_step">
			<h3>With Steps</h3>
			<div class="circle">
				<div class="pin"></div>
			</div>
		</section>
	</div>
</body>

</html>