animate.css动画 循环播放出现衔接不上的问题.感觉有卡顿

Question

.hinge {
  -webkit-animation-name: hinge;
  animation-name: hinge;
  -webkit-animation-iteration-count:10;
  animation-iteration-count:10;

}

@-webkit-keyframes hinge {
  1%  {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  20% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  40% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }
  60% {
    -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
  }

  80% {
    -webkit-transform: rotate(0deg) translateY(0);
    transform: rotate(0deg) translateY(0);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
    opacity: 1;
  }

  100% {
   -webkit-transform: rotate(10deg);
    transform: rotate(10deg);
    -webkit-transform-origin: bottom center;
    transform-origin: bottom center;
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
 
  }

}

Answer 1

-webkit-animation-direction:alternate; /* Safari 和 Chrome */ 

貌似这个可以解决

不晓得是不是完美的解决方案