css3旋转，停顿

容器

image.png

<div class="whirling">
    <div class="whirling-go"></div>
    <div class="whirling-back"></div>
 </div>

样式

.whirling {
  width: 240px;
  height: 200px;
  transition: transform 0.6s ease-out;
  transition: transform 0.5s ease-in-out;
  -webkit-transition: transform 0.5s ease-in-out;
  -moz-transition: transform 0.5s ease-in-out;
  -ms-transition: transform 0.5s ease-in-out;
  -o-transition: transform 0.5s ease-in-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: relative;
  animation: whirl linear infinite 3.8s;
  -webkit-animation: whirl linear infinite 3.8s;
}

.whirling-go,
.whirling-back {
  backface-visibility: hidden;
  transition: 0.6s ease-out;
  -webkit-transition: 0.6s ease-out;
  -webkit-transform-style: preserve-3d;
  -moz-transform-style: preserve-3d;
  -ms-transform-style: preserve-3d;
  -o-transform-style: preserve-3d;
  transform-style: preserve-3d;
  position: absolute;
  top: 0;
  left: 0;
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

.whirling-go {
  z-index: 2;
  transform: rotateY(0deg);
  transform: rotateY(0deg);
  -webkit-transform: rotateY(0deg);
  -moz-transform: rotateY(0deg);
  -ms-transform: rotateY(0deg);
  -o-transform: rotateY(0deg);
  background: url("~@/assets/img/public/transform.png") no-repeat;
}

.whirling-back {
  z-index: 1;
  transform: rotateY(-180deg);
  -webkit-transform: rotateY(-180deg);
  -moz-transform: rotateY(-180deg);
  -ms-transform: rotateY(-180deg);
  -o-transform: rotateY(-180deg);
  background: url("~@/assets/img/public/transform.png") no-repeat;
}

@-webkit-keyframes whirl {
  0% {
    transform: rotateY(0deg);
  }

  5% {
    transform: rotateY(-280deg);
  }

  10% {
    transform: rotateY(-540deg);
  }

  50% {
    transform: rotateY(-540deg);
  }

  55% {
    transform: rotateY(-260deg);
  }

  60% {
    transform: rotateY(-0deg);
  }

  100% {
    transform: rotateY(-0deg);
  }
}

@keyframes whirl {
  0% {
    transform: rotateY(0deg);
  }

  10% {
    transform: rotateY(-180deg);
  }

  50% {
    transform: rotateY(-180deg);
  }

  60% {
    transform: rotateY(-360deg);
  }

  100% {
    transform: rotateY(-360deg);
  }
}