一个div 依次执行两个关键帧动画

CSS关键帧动画允许你创建平滑的动画效果，这些动画效果会在特定的关键帧之间变化。一个`div`元素可以通过`@keyframes`规则和`animation`属性来依次执行两个关键帧动画。

首先，你需要定义两个不同的关键帧动画，每个动画都有自己的名称和关键帧。例如：

@keyframes animationOne {
  0% { background-color: red; }
  100% { background-color: blue; }
}

@keyframes animationTwo {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

然后，你需要为`div`元素指定这两个动画的执行顺序和持续时间。可以通过设置`animation-name`属性来指定要使用的动画名称，通过`animation-duration`来设置动画的持续时间，通过`animation-timing-function`来设置动画的速度曲线，以及使用`animation-iteration-count`来设置动画的迭代次数等。如果需要两个动画依次执行，可以使用`animation-delay`属性来设置第二个动画的延迟时间。

div {
  animation-name: animationOne, animationTwo;
  animation-duration: 3s, 4s;
  animation-timing-function: ease, linear;
  animation-iteration-count: 1, 1;
  animation-direction: normal, normal;
}

/* 第二个动画在第一个动画完成后开始 */
div {
  animation-delay: 3s; /* 延迟时间与第一个动画的持续时间相同 */
}

在上面的代码中，`div`元素首先执行名为`animationOne`的动画，该动画持续3秒，然后立即执行名为`animationTwo`的动画，该动画持续4秒。由于`animation-delay`设置为3秒，所以第二个动画会在第一个动画完成后开始执行。