使用两个动画的css3 :第二个动画不是从第一个动画位置开始

@keyframes animation1 {
  0% {
    /* 第一个动画的起始状态 */
    /* 定义元素的初始位置、大小、颜色等属性 */
  }
  50% {
    /* 第一个动画的中间状态 */
    /* 定义元素的中间位置、大小、颜色等属性 */
  }
  100% {
    /* 第一个动画的结束状态 */
    /* 定义元素的最终位置、大小、颜色等属性 */
  }
}

@keyframes animation2 {
  0% {
    /* 第二个动画的起始状态 */
    /* 定义元素的初始位置、大小、颜色等属性 */
  }
  50% {
    /* 第二个动画的中间状态 */
    /* 定义元素的中间位置、大小、颜色等属性 */
  }
  100% {
    /* 第二个动画的结束状态 */
    /* 定义元素的最终位置、大小、颜色等属性 */
  }
}

div {
  animation: animation1 2s linear 0s infinite, animation2 2s linear 2s infinite;
}