Question

当我使用CSS动画时，我不得不连续制作两个动画，但是当我这样做时，我只记得动画必须无限重复。是否有任何方法可以使它们以相同的顺序无限重复，而无需通过仅使用CSS合并关键帧来使动画一致？

如果没有，我该如何使用JavaScript？

我尝试在上一个动画的最后一个关键帧中重新调用该动画，但这没有用，因为您无法为动画设置动画。

.div{

animation: spin 1.6s ease-in-out 0s 1 normal running,
           rotate 1s ease-in-out 1.5s 1 normal running;
}

@keyframes spin {
  from {
    transform: rotateX(0deg);
  }
  99% {
    transform: rotateX(360deg);
  }
  100% {
    transform: rotateX(360deg);
    animation: spin 1.6s ease-in-out 0s 1 normal running,
               rotate 1s ease-in-out 1.5s 1 normal running;
  }
}
@keyframes rotate {
  from {
    transform: rotatez(0deg) rotatey(0deg);
  }
  to {
    transform: rotatez(-33deg) rotatey(-37deg);

      ;
  }
}

Answer 1

只需根据您的要求创建一个新动画：

.box{
 background:red;
 width:100px;
 height:100px;
animation: spin 2.6s ease-in-out  infinite;
}

@keyframes spin {
  0%{
    transform: rotateX(0deg);
  }
  61.54% { /*1.6s */
    transform: rotateX(360deg) rotatez(0) rotatey(0) translateZ(0);
  }
  100% {
    transform: rotateX(360deg) rotatez(-33deg) rotatey(-37deg) translateZ(1000px);
  }
}

<div class="box">
</div>

使用CSS动画时，有什么方法可以使连续的动画以给定的顺序无限重复

1 个答案: