CSS 动画是 Web 开发中经常使用的一种技术，可以通过一系列的 CSS 属性和值来实现各种动画效果，比如渐变、旋转、缩放、移动等。在使用 CSS 动画时，动画的执行顺序非常重要，下面介绍一些基本的 CSS 动画先后顺序。

1、动画的过渡属性：

.box{
transition: all 1s ease;
}

在这个示例中，动画的过渡属性为“all 1s ease”，其中“all”表示对元素的所有属性进行过渡，1s 表示动画的持续时间为 1 秒，而“ease”表示动画执行时的缓动函数为默认的缓动函数。

2、动画的关键帧：

.box{
animation: myanimation 1s ease;
}
@keyframes myanimation{
0%{
color: red;
}
50%{
color: blue;
}
100%{
color: green;
}
}

在这个示例中，动画的关键帧通过 @keyframes 规则来定义，其中“myanimation”表示动画的名称，0%、50%、100% 分别代表动画执行到的时间点，color 属性的值分别为红、蓝、绿色。

3、动画的延迟属性：

.box{
animation: myanimation 1s ease 2s;
}
@keyframes myanimation{
0%{
color: red;
}
50%{
color: blue;
}
100%{
color: green;
}
}

在这个示例中，动画的延迟属性为“2s”，表示动画将在 2 秒后执行。

总之，在使用 CSS 动画时，需要根据具体的需求和设计来灵活运用这些动画属性和值，以实现更加优秀的动画效果。