交错的无限 CSS 动画

Question

我想知道是否可以有一个循环动画，每次动画完成一个完整循环时交错？

.hex{
    animation: fio $animation-speed ease-in-out infinite;
    transform: scale(.9);
    opacity: 0;
    &.one{

    }

    &.two{
      animation-delay: $animation-speed * 1;
    }

    &.three{
      animation-delay: $animation-speed * 2;
    }
}

@keyframes fio{
  0% {
    opacity:0;
    transform:  scale(0.90);
  }
  50% {
    opacity:1;
    transform:  scale(1.00);
  }
  100% {
    opacity:0;
    transform:  scale(0.90);
  }
}

从代码中可以看出，它在第一次播放动画时是惊人的，但之后它只是同时淡入淡出所有 3 个元素。是否有可能让它在每个循环后交错？

如果您需要更多信息，请告诉我。

谢谢！

Answer 1

您只需要计算所有延迟的整个动画持续时间并相应地设置它们，如下所示：

.hex {
    animation: fio 1800ms ease-in-out infinite; /* This devided to three is the amount you want for the delay below */
    animation-delay: 3600ms; /* All animation delays in one + two + three and add animation duration above to this */
    transform: scale(.9);
    opacity: 0;
  &.one {
    animation-delay: 0ms;
    width: 50px;
    height: 50px;
    background-color: red;
  }

  &.two {
    animation-delay: 600ms;
    width: 50px;
    height: 50px;
    background-color: blue;
  }

  &.three {
    animation-delay: 1200ms;
    width: 50px;
    height: 50px;
    background-color: green;
  }
}

小提琴：https://jsfiddle.net/2u43tc8z/2/