css steps_使用steps（）函数控制CSS3动画

动画是CSS引入的最大功能之一。 过去，网络动画仅在JavaScript或Flash区域中可用。 但是，今天，许多网站都选择使用CSS添加细微的动画 。 在之前的文章中，我们介绍了如何使用CSS动画做一些很酷的事情，例如添加选取框效果和为某些东西添加反弹效果 。

在本文中，我们将再次深入探讨CSS动画。 这次，我们将讨论CSS动画功能， steps() ，它使我们能够控制动画的运动 —不要惊慌，它不像听起来那样令人费解。 让我们来看看。

那是什么

通常，CSS中的动画将以指定的持续时间从头到尾连续进行。 steps()是动画计时功能的一部分。 它使我们能够控制动画逐渐移动。 最好的例子显示了steps()工作原理，这将是模拟时钟的秒针 。 时钟秒针不会连续移动，而是将其分为多个阶段。 因此，让我们用CSS动画和steps()复制它。

复制时钟的秒针

让我们首先添加将秒针旋转360度的关键帧。 旋转将从90度（或12点）开始。 请注意，以下代码可能需要前缀（ -moz- ， -o- -ms-和-ms- ）才能在浏览器中使用。

@-webkit-keyframes rotation {
    from {
    	transform: rotate(90deg);
    }
    to {
    	transform: rotate(450deg);
    }
}

秒针将每秒稳定移动，并在60秒内完成360度旋转。 因此，在这里，我们将动画持续时间设置为60s ，这将告诉浏览器以60 steps(60)如steps(60)完成动画。

.second {
	animation: rotation 60s steps(60) infinite;
	transform-origin: 100% 50%;

	//styles decoration
	background-color: #e45341;
	height: 2px;
	margin-top: -1px;
	position: absolute;
	top: 50%;
	width: 50%;
}

为此，我们创建了两个演示。 一个带有steps() ，另一个带有linear 。 您可以从下面的屏幕截图中看到不同的动作。

希望在这一点上，您可以弄清楚并想象steps()工作方式。 要观看实际的演示，请点击下面的链接。

• 观看演示
• 下载源

更多灵感...

另外，这里我们收集了一些出色的实验和演示，它们利用了许多Web开发人员的steps() 。 检查一下它们，希望您能从中得到一些启发。

• Lea Verou 提供的纯CSS3输入的带有steps（）的动画
• Rachel Nabors的Cat Walk
• Ken的街头霸王II （David Walsh）

翻译自: https://www.hongkiat.com/blog/css3-animation-steps/