likes
comments
collection
share

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

作者站长头像
站长
· 阅读数 27

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

本文采用意译的方式

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

语法：

steps( n , jumpterm )

上面语法中：

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() 方法

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

说明：

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

👆

下面是实现的两个例子👇

例子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 个停顿点上扩展。

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

例子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>

输出：我们可以观察到不同，左边的时钟秒针旋转得很流畅，而右边这个不行。

转载自:https://juejin.cn/post/7396160478715101236
评论
请登录