Css动画执行顺序

我是一名代码初学者，遇到了一个小问题

我创建了一个棋盘，我想用棋子制作动画

我的问题是，第一件作品的第一个动画开始，然后第二件作品开始它的动画，我的问题从这里开始。在第二段动画结束后，我想在同一段动画中发布一个新的动画。但我不知道怎么做。我尝试将其添加为第二个类，并仅使用此新类创建了一个新的关键帧，但失败了

希望有人能给我答案：）

表格
{
宽度：500px；
高度：500px；
边框样式：实心；
边界宽度：薄；
保证金：自动；
边界塌陷：塌陷；
}
运输署
{
边框样式：实心；
宽度：20px；
高度：20px；
}
白色
{
背景色：仿古白色；
}
黑色
{
背景颜色：灰色；
}
img
{
宽度：20px；
高度：20px；
显示：块；
左边距：自动；
右边距：自动；
}
h1
{
文本对齐：居中；
字体系列：代理FB；
字体大小：50px；
}
.l2 img
{
过滤器：倒置（100%）；
}
.验证
{
保证金：自动；
宽度：1000px；
高度：500px
}
移动
{
位置：相对位置；
动画名称：示例；
动画填充模式：正向；
动画持续时间：2.5s；
}
@关键帧示例{
0%{左：0px；顶：0px；}
100%{左：0px；顶：65px；}
}
.2
{
位置：相对位置；
动画名称：示例2；
动画持续时间：2.5s；
动画填充模式：正向；
动画延迟：2.5s；
}
@关键帧示例2{
0%{左：0px；顶：0px；}
100%{左：0px；上：-65px；}
}

电子版CSS
练习版

如果要重复动画：

 .move2
{
  position: relative;
  animation:   example2 5s infinite;
}

如果您不想在第一个动画结束时开始第二个动画，那么您应该更改动画延迟。比如：

 @keyframes example1 {
  0%   {left:0px; top:0px;}
  50% { left:0px; top:50px;} 
  100% { left:0px; top:50px;}
}


 @keyframes example2 {
      0%   {left:0px; top:0px;}
      50% { left:0px; top:0px;} 
      100% { left:0px; top:-50px;}
    }

---

如果要重复动画，请执行以下操作：

 .move2
{
  position: relative;
  animation:   example2 5s infinite;
}

如果您不想在第一个动画结束时开始第二个动画，那么您应该更改动画延迟。比如：

 @keyframes example1 {
  0%   {left:0px; top:0px;}
  50% { left:0px; top:50px;} 
  100% { left:0px; top:50px;}
}


 @keyframes example2 {
      0%   {left:0px; top:0px;}
      50% { left:0px; top:0px;} 
      100% { left:0px; top:-50px;}
    }