CSS 允许在不使用 JavaScript 的情况下对 HTML 元素进行动画处理。
动画让元素逐渐从一种样式变为另一种样式。您可以根据需要随时更改任意数量的 CSS 资产。要使用 CSS 动画，首先必须为动画指定一些关键帧。关键帧捕获元素在给定时间的样式。
CSS | @keyframes 规则
@keyframes 规则用于指定动画规则。动画是通过使用可变的 CSS 样式创建的。在动画 CSS 期间，该属性可以更改多次。
句法：
@keyframes animation-name {keyframes-selector {css-styles;}}
属性值：此参数接受上面提到和下面描述的三个值：
- 动画名称：动画名称是必需的，它定义了动画名称。
- keyframes-selector：关键帧选择器定义动画的百分比。它介于 0% 到 100% 之间。一个动画可以包含多个选择器。
- css-styles： css-styles 定义了一个或多个合法或适用的 CSS 样式属性。
要定义动画，您必须从 @keyframes 规则开始。 @keyframe 规则由关键字“@keyframes”组成，后跟一个为动画命名的标识符（将使用 animation-name 引用），后跟一组样式规则（由花括号分隔）。然后通过使用标识符作为 animation-name 属性的值将动画应用于元素。
这是我们将使用的 @ 规则：
/* define the animation */
@keyframes your-animation-name {
/* style rules */
}
/* apply it to an element */
.element {
animation-name: your-animation-name;
/* OR using the animation shorthand property */
animation: your-animation-name 1s ...
}
示例 1：
输出： 
示例 2：
geeksforgeeks geeksforgeeks geeksforgeeks
geeksforgeeks geeksforgeeks
geeksforgeeks
输出： 