Question

我尝试创建一个将开始旋转的函数-然后替换图像，然后停止旋转。

但是，当我删除旋转类时-它发生了震动-我如何停止旋转，但仍在框架上。

setTimeout(function() {
  $('.image').addClass("spinner");
}, 400);
setTimeout(function() {
  $('.image').removeClass("spinner");
}, 1500);

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear infinite;
  -moz-animation: spin 1s linear infinite;
  animation: spin 1s linear infinite;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

基本代码 http://jsfiddle.net/m6z4jgdq/

当前示例 http://jsfiddle.net/m6z4jgdq/2/

Answer 1

您可以通过删除CSS动画中的infinite迭代次数使图像仅旋转一次，使其仅运行一次：

.spinner {
  -webkit-animation: spin 1s linear;
  -moz-animation: spin 1s linear;
  animation: spin 1s linear;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards; 
  animation-delay: 400ms; /* start animation after 400ms */
}

这样，就无需手动停止它的旋转，因为它在旋转360°之后自然会停止（消除出现的“颠簸”）。如果要在animation-delay之后开始动画，而不是使用JS和400ms，也可以添加setTimeout：

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear;
  -moz-animation: spin 1s linear;
  animation: spin 1s linear;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

您可以通过以animate CSS样式进行指定来指定迭代次数（即动画重复的次数）。例如，如果您希望它旋转3次，则可以执行以下操作：

animation: spin 1s linear 3;

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 1s linear 3;
  -moz-animation: spin 1s linear 3;
  animation: spin 1s linear 3;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-moz-keyframes spin {
  100% {
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

如果您希望在每次旋转之间有一个延迟，那么您需要指定不做任何事情的关键帧，并延长动画时间，使其也可以解释延迟：

.image {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 120px;
  height: 120px;
  margin: -60px 0 0 -60px;
}

.spinner {
  -webkit-animation: spin 2s linear 3;
  -moz-animation: spin 2s linear 3;
  animation: spin 2s linear 3;
  -webkit-animation-fill-mode: forwards;
  /* Safari 4.0 - 8.0 */
  animation-fill-mode: forwards;
  animation-delay: 400ms;
}

@-moz-keyframes spin {
  50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
    -moz-transform: rotate(360deg);
  }
}

@-webkit-keyframes spin {
  50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
    -webkit-transform: rotate(360deg);
  }
}

@keyframes spin {
  50%, 100% { /* 50% of 2secs = 1sec, so 1 sec delay between rot */
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img class="image spinner" src="http://makeameme.org/media/templates/120/grumpy_cat.jpg" alt="" width="120" height="120">

css3旋转动画-开始旋转，然后在帧上停止

1 个答案: