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/

交错的无限CSS动画

1 个答案: