1. `animation-name`：动画的名称，用于定义动画的开头。
2. `animation-duration`：动画的持续时间，用于定义动画的持续时间。
3. `animation-timing-function`：动画的时间函数，用于定义动画的速度曲线。
通过使用这三个属性，可以实现各种复杂的动画效果，下面是具体的用法：
## 1. `animation-name`：动画的名称
`animation-name` 属性用于指定动画的名称，可以定义一个唯一的动画，用于区分不同的动画。例如：
“`css
@keyframeskeyframes_name {
0% {
transform: translate(0, 0);
100% {
transform: translate(0, 100);
在上面的代码中，`keyframes_name` 是定义了一个动画的名称，该动画将从一个位置移动到另一个位置，动画的起始值为 0，结束值为 100%。
## 2. `animation-duration`：动画的持续时间
`animation-duration` 属性用于指定动画的持续时间，用于定义动画的持续时间，单位为秒。例如：
“`css
@keyframeskeyframes_name {
0% {
transform: translate(0, 0);
100% {
transform: translate(0, 100);
animation-duration: 1000ms;
在上面的代码中，`animation-duration` 属性定义了一个动画的持续时间为 1000 毫秒。
## 3. `animation-timing-function`：动画的时间函数
`animation-timing-function` 属性用于定义动画的速度曲线，用于定义动画的速度变化方式。例如：
“`css
@keyframeskeyframes_name {
0% {
transform: translate(0, 0);
100% {
transform: translate(0, 100);
animation-timing-function: linear;
在上面的代码中，`animation-timing-function` 属性定义了一个动画的时间函数为线性，该动画将以线性速度变化。
通过使用这三个属性，可以实现各种复杂的动画效果，可以根据需要灵活地使用它们来实现不同的动画效果。