Question

我正在尝试使css动画看起来更加生动，我希望它永远循环并平滑地执行，最后一帧应该看起来像第一帧，但是现在，当动画结束时，它会回弹到原始状态。我想通过自定义滑块使用这种效果。

这是我的代码：

.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，其中包含有关动画工作方式的更多信息。

使css动画永远循环流畅

1 个答案: