使用 CSS 制作动画需要使用关键帧（@keyframes）规则。关键帧规则是指在动画过程中定义不同阶段的样式，通过指定不同的关键帧，可以实现复杂的动画效果。
关键帧规则的语法如下：
@keyframes animationName {
0% {
/* 初始样式 */
}
50% {
/* 中间样式 */
}
100% {
/* 结束样式 */
}
}其中，animationName 是动画的名称，可以自定义；0%、50%、100% 分别表示动画的开始、中间和结束阶段，可以根据需求自定义百分比值；在每个阶段中，通过设置不同的样式来实现动画效果。
接下来，需要使用 animation 属性将动画应用到元素上，语法如下：
animation: animationName duration timing-function delay iteration-count direction fill-mode;其中，animationName 是动画的名称，duration 是动画的持续时间，可以使用 s 或 ms 作为单位；timing-function 是动画的时间函数，用于控制动画的速度变化，常用的时间函数有 linear（匀速）、ease（先加速后减速）、ease-in（加速）、ease-out（减速）、ease-in-out（先加速后减速）等；delay 是动画的延迟时间，可以使用 s 或 ms 作为单位；iteration-count 是动画的循环次数，可以使用数字或 infinite 表示无限循环；direction 是动画的播放方向，可以使用 normal（正常播放）或 reverse（反向播放）；fill-mode 是动画结束后的样式，可以使用 none（不改变样式）、forwards（保留最后一帧的样式）或 backwards（使用第一帧的样式）。
以下是一个例子：
.box {
width: 100px;
height: 100px;
background-color: red;
animation: myAnimation 2s ease-in-out 1s infinite alternate;
}
@keyframes myAnimation {
0% {
transform: translateX(0);
}
50% {
transform: translateX(50px);
}
100% {
transform: translateX(0);
}
}在上述例子中，元素的宽高和背景颜色通过普通的 CSS 样式来设置，动画通过 animation 属性来定义，动画名称为 myAnimation，持续时间为 2s，时间函数为 ease-in-out，延迟时间为 1s，循环次数为 infinite，播放方向为 alternate，即正向播放后反向播放，fill-mode 为 none，即动画结束后不改变样式。关键帧规则中，定义了元素从初始位置水平移动 50px 再回到初始位置的动画效果。
除了上述属性外，还有 animation-play-state 属性用于控制动画的播放和暂停状态，animation-delay 属性用于控制动画的延迟时间，animation-direction 属性用于控制动画的播放方向，animation-fill-mode 属性用于控制动画结束后的样式，animation-iteration-count 属性用于控制动画的循环次数，animation-timing-function 属性用于控制动画的时间函数，animation-name 属性用于指定动画的名称。