1. 介绍
在CSS中，keyframes是用于定义动画的关键帧的一个规则。使用keyframes，可以控制动画的每一帧的样式和过渡效果。
2. 语法
CSS中keyframes的语法如下：
@keyframes animationName {
keyframe-selector {
/* keyframe styles */
}
}
其中：
@keyframes是关键字，用于定义动画的关键帧。
animationName是动画的名字，可以自定义。
keyframe-selector是关键帧选择器，可以是百分比或关键词。
keyframe styles是关键帧的样式，可以包含多个CSS属性。
3. 关键帧选择器
关键帧选择器指定了动画在不同阶段的样式。它可以是百分比（0%到100%）或关键词（如from和to）。
3.1 百分比
使用百分比作为关键帧选择器，可以指定动画在不同百分比处的样式。例如：
@keyframes slidein {
0% {
left: -100%;
}
100% {
left: 0;
}
}
在上面的例子中，动画从左边完全隐藏（left: -100%），到显示出来（left: 0%）。
3.2 关键词
关键词可以简化动画定义，它包括两个关键词：
from：相当于0%。
to：相当于100%。
使用关键词作为关键帧选择器的例子：
@keyframes fadein {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
上述代码定义了一个淡入的动画，元素从透明度为0（opacity: 0）的状态到透明度为1（opacity: 1）的状态。
4. 示例
下面是一个使用keyframes定义动画的示例：
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.box {
width: 100px;
height: 100px;
background-color: red;
animation: rotate 2s infinite linear;
}
上述代码定义了一个旋转的动画（rotate），元素在2秒内无限循环（infinite），以线性方式运动（linear）。
在上述代码中，首先使用@keyframes定义了一个名为rotate的动画，该动画从transform: rotate(0deg)（初始状态）到transform: rotate(360deg)（结束状态）。然后，通过将animation属性应用于.box类，实现了动画效果。
5. 总结
CSS中的keyframes允许开发者定义动画的关键帧，控制动画的每一帧的样式和过渡效果。使用百分比或关键词作为关键帧选择器，可以指定动画在不同阶段的样式。通过animation属性将动画应用于元素，实现动画效果。
通过使用keyframes，开发者可以创建出各种各样的动画效果，增加网页的交互性和视觉效果。