[分享]css两个动画先后执行顺序

CSS动画是Web开发中重要的一部分，它可以让网页更加生动和有趣。其中，两个动画先后执行的顺序是常见的问题之一。keyframes animation1 { from { transform: rot...

CSS动画是Web开发中重要的一部分，它可以让网页更加生动和有趣。其中，两个动画先后执行的顺序是常见的问题之一。

@keyframes animation1 {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes animation2 {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: animation1, animation2;
  animation-duration: 2s, 1s;
  animation-timing-function: ease-in-out, linear;
  animation-delay: 0s, 1s;
  animation-iteration-count: infinite, 1;
  animation-direction: alternate, normal;
} 

在上面的代码中，我们定义了2个动画，分别是animation1和animation2。然后我们给一个红色的