关键帧
关键帧（Keyframes）语法是CSS中用于定义动画序列的一种方式。关键帧动画通过 @keyframes 规则来创建，你可以指定动画在不同时间点的样式。下面是关键帧动画的基本语法：
@keyframes animation-name {
0% {
/* 在动画开始时应用的样式 */
}
50% {
/* 在动画中间时应用的样式 */
}
100% {
/* 在动画结束时应用的样式 */
}
}
-
@keyframes关键字用于声明一个动画。 -
animation-name是你给动画定义的名称，之后可以在元素的animation属性中使用这个名称来引用这个动画。 -
0%,50%,100%是关键帧的标记，代表动画的时间进度。0%是动画的起始点，100%是动画的结束点。你可以使用从0%到100%之间的任何百分比来指定动画的中间步骤。 - 在每个百分比的大括号
{}内，你可以写入当动画达到该时间点时想要应用的CSS样式。
例如，如果你想创建一个简单的淡入淡出动画，可以这样写：
@keyframes fadeInOut {
0% {
opacity: 0;
}
50% {
opacity: 1;
}
100% {
opacity: 0;
}
}
然后，你可以将这个动画应用到任何元素上，如下所示：
.element {
animation: fadeInOut 3s infinite;
}
在这里，.element 是要应用动画的元素的类名。animation 属性使用了我们定义的 fadeInOut 动画，设置动画持续3秒，并且是无限循环的。
你也可以使用多个关键帧定义更复杂的动画效果：
@keyframes complex-animation {
0% {
transform: translateX(0px);
background-color: blue;
}
25% {
transform: translateX(100px);
background-color: red;
}
50% {
transform: translateX(200px);
background-color: green;
}
75% {
transform: translateX(100px);
background-color: yellow;
}
100% {
transform: translateX(0px);
background-color: blue;
}
}
这个例子中的动画让元素在水平方向上移动，并且在移动过程中改变背景颜色。
