html - 使css动画流畅地永远循环

Question

我正在尝试让我的 CSS 动画看起来更活泼。我希望它永远循环并顺利进行。最后一帧应该看起来像第一帧，但现在，当动画结束时，它会快速恢复到原始状态。我想在我的自定义 slider 中使用此效果。

这是我的代码:

.move {
  animation: move 30s ease;
  -ms-animation: move 30s ease; 
  -webkit-animation: move 30s ease; 
  -moz-animation: move 30s ease;
}


@keyframes move {
  0% {
    -webkit-transform-origin: bottom top;
    -moz-transform-origin: bottom top;
    -ms-transform-origin: bottom top;
    -o-transform-origin: bottom top;
    transform-origin: bottom top;
    transform: scale(1.0);
    -ms-transform: scale(1.0);
    -webkit-transform: scale(1.0);
    -o-transform: scale(1.0);
    -moz-transform: scale(1.0);
  }

  100% {
    transform: scale(1.3);
    -ms-transform: scale(1.3);
    -webkit-transform: scale(1.3);
    -o-transform: scale(1.3);
    -moz-transform: scale(1.3);
  }
}

Answer 1

您可以将animation-iteration-count设置为infinite使其永远运行，然后使用animation-direction属性alternate，向前播放动画，向后播放十次。这是速记属性；

-ms-animation: move 30s ease infinite alternate; 
-webkit-animation: move 30s ease infinite alternate; 
-moz-animation: move 30s ease infinite alternate;

致谢:w3schools ，其中包含有关动画工作原理的更多信息。