📅 最后修改于: 2023-12-03 15:30:07.901000 🧑 作者: Mango
CSS @keyframes规则是一种用于创建动画效果的CSS规则。该规则允许指定动画中每个关键帧的样式参数，从而实现在不同时间段内的渐变效果。
@keyframes animationName {
0% { CSS styles }
50% { CSS styles }
100% { CSS styles }
}
@keyframes规则由 @keyframes 关键字和动画名称组成。
接下来，您可以指定动画中关键帧的样式参数。每个关键帧都代表动画在某个时间点的状态。
关键帧由一个百分比值（可以是 0% 到 100% 的任意值）表示。
要使用 @keyframes 规则实现动画，您需要将其与 CSS 的 animation 属性一起使用。
以下示例将 @keyframes 规则的 animationName 绑定到元素的 animation 属性：
div {
animation: animationName 3s infinite;
}
此示例中的 animation 属性定义了元素的动画名称、动画时间（3秒）和无限循环选项。
下面是一个完整的使用 @keyframes 规则创建动画的示例：
<!DOCTYPE html>
<html>
<head>
<style>
@keyframes example {
from {background-color: red;}
to {background-color: yellow;}
}
div {
width: 100px;
height: 100px;
background-color: red;
animation-name: example;
animation-duration: 2s;
animation-delay: 1s;
animation-iteration-count: infinite;
}
</style>
</head>
<body>
<h1>实例</h1>
<div></div>
</body>
</html>
此示例中，我们定义了名称为 example 的 @keyframes 规则，使背景颜色从红色变为黄色。
接下来，我们将 animation-name 设为 example，使该规则的效果应用到元素上。animation-duration 为 2 秒，animation-delay 为 1 秒，使动画在元素加载后 1 秒后开始，循环次数为无限次。
CSS @keyframes 规则是在不同时间段内实现渐变效果的强大工具。它可以与 CSS 的 animation 属性一起使用，来使元素显示动画效果。