CSS 允许在不使用 JavaScript 的情况下为 HTML 元素设置动画。动画让元素系统地并在适当的时机下从一种样式更改为另一种样式。您可以根据需要更改您想要的任何 CSS 属性，结束次数。要使用 CSS 动画，首先必须为动画指定一些 @keyframes。 @keyframes 将描述该元素在特定时间将具有哪些样式。
我们将使用一个基本示例，例如电池充电动画。
@keyframes 属性可以选择将动画时间划分为部分/百分比，并执行为整个动画持续时间的那部分指定的活动。 @keyframes 属性根据动画的名称赋予每个动画。它也允许您无限地运行动画。
这是一个简单的 CSS 块，解释了 @keyframes 的用法：
示例：在背景颜色更改中使用 @keyframes。
CSS Animation and @Keyframes Property
Output:
注意：在使用@keyframes 时，有一些指导方针可供您创建流畅且有效的动画。例如，确保您使过渡平滑并以百分比或关键字“from”和“to”指定何时发生样式更改，这与 0% 和 100% 相同。 0% 是动画开始时，100% 是动画完成时。为了获得最佳浏览器支持，即确保整个 Internet 上的所有浏览器都支持动画，请务必始终定义 0% 和 100% 选择器。
为电池充电的动画很重要，因为它可以帮助您了解 @keyframes 属性如何帮助您以完美的间隔为动画计时，从而帮助使过渡平滑。电池充电用于解释如何通过指定分割百分比来设置给定时间段内的各种动画，在示例中电池如何从 0-25% 充电，然后从 25-50% 等等.
CSS Animation and @Keyframes Property
Output:
