CSS @keyframes rule

CSS @keyframe 规则指定了动画规则，该规则定义了元素在时间线上的每个状态的 CSS 属性。

我们可以使用 @keyframe 创建复杂的动画属性。动画是通过可变的 CSS 样式创建的，这些样式可以无限期地重复或重复有限次。一个简单的动画可能只有两个关键帧，而复杂的动画则有几个关键帧。

语法

要使用关键帧，我们需要创建一个 @keyframes 规则，并配合 animation-name 属性来将动画与其关键帧声明进行匹配。

它接受三个值。让我们详细讨论每个值。

属性值

animation-name: 这是定义动画名称的必需值。

keyframes-selector: 它指定了关键帧发生的动画百分比。其值在 0% 到 100% 之间，从 (与 0% 相同) 到 (与 100% 相同)。关键帧百分比可以按任何顺序编写，因为它们将按照出现的顺序进行处理。

css-styles: 它定义了一个或多个 CSS 样式属性。

如果关键帧规则没有定义动画的开始和结束状态，则浏览器将使用元素现有的样式。在关键帧规则中无法动画化的属性将被忽略。

关键帧时间函数

为了控制动画速率，我们可以使用以下值。

linear: 它表示过渡速率从开始到结束都是恒定的。

ease: 它表示动画开始时速度较慢，然后在一段时间后，速度加快，在结束前速度再次减慢。

ease-in: 它类似于 ease，但动画结束得很快。

ease-out: 它也类似于 ease，但动画开始时速度很快。

让我们通过一些插图来理解 CSS @keyframe 规则。

示例

示例 2

注意事项

关于此规则的一些重要点如下：

• 我们可以使用 from 关键字代替 0%。
• 我们可以使用 to 关键字代替 100%。
• 即使我们使用了 from 和 to 关键字，它们之间的任何值仍然会以 % 声明。
• 对于有效的动画，必须声明开始和结束时间。
• 涉及 !important 的声明将被忽略。