css 一个动画完后间隔

在CSS中，我们常常需要使用动画来实现一些比较复杂的效果。有时候，我们需要让动画完成后，在一定的时间间隔之后再执行下一次动画。这时候，我们可以使用CSS3中提供的animation-delay属性来控制动画结束后的时间间隔。

animation-delay属性可以用于设置动画开始之前的延迟时间，也可以用于设置动画结束后的间隔时间。如果我们想要在动画完成后等待一定的时间之后再次执行动画，那么我们可以使用animation-delay属性来控制这个时间间隔。

/* 动画执行完成后等待3秒，然后再次执行动画 */
div {
  animation-name: myanimation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-delay: 3s;
}

@keyframes myanimation {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100px);
  }
  100% {
    transform: translateX(0);
  }
}

上面的代码中，我们设置了一个div元素的动画，动画名称为myanimation，持续时间为2s，重复次数为无限次，动画结束后等待3s再次执行动画。在动画的关键帧部分，我们使用了translateX属性来实现元素的平移动画。

除了animation-delay属性，我们还可以使用transition-delay属性来控制CSS过渡效果的延迟时间。transition-delay属性的用法和animation-delay属性类似。我们可以使用这个属性来控制过渡效果结束后的间隔时间。

/* 元素过渡效果完成后等待1秒，然后再次执行过渡效果 */
div {
  transition: transform 2s ease;
  transition-delay: 1s;
}

div:hover {
  transform: rotate(360deg);
}

上面的代码中，我们设置了一个div元素的过渡效果，过渡效果属性为transform，过渡时间为2s，缓动函数为ease，过渡效果完成后等待1s后再次执行过渡效果。在悬停事件的处理函数中，我们使用了rotate属性来实现元素的旋转效果。

CSS中的动画延迟属性可以帮助我们控制动画和过渡效果结束后的间隔时间。通过灵活运用这些属性，我们可以创造出更加多样化且智能化的动画效果。