Question

我对css3没有太多了解，而且我得到了这个无限旋转的代码片段。

.spin {
  -webkit-animation: rotation 0.4s linear infinite;
  animation: rotation 0.4s linear infinite;
  -webkit-transform: translateX(100%) translateY(-100%) rotate(45deg);
  transform: translateX(100%) translateY(-100%) rotate(45deg);
}

@-webkit-keyframes rotation {
    0%      { -webkit-transform: rotate(0deg); }
    50%     { -webkit-transform: rotate(-180deg); }
    100%    { -webkit-transform: rotate(-360deg); }
}

@keyframes rotation {
    0%      { transform: rotate(0deg); }
    50%     { transform: rotate(-180deg); }
    100%    { transform: rotate(-360deg); }
}

我想在几秒钟后停止旋转，但我不知道该改变什么。我尝试将infinite更改为3，但它已停止并将我的div放在其他位置。我需要一个平稳的停止并保留div的原始位置。

Answer 1

点击此处 jsfiddle

由于translate

，元素正在移动

代码：

.spin {
 height:50px;
 width:50px;
 background:red;
 -webkit-animation: rotation 0.4s linear 3;
 animation: rotation 0.4s linear 3;
 -webkit-transform: rotate(45deg);
 transform:  rotate(45deg);
}

你应该知道infinite是animation-iteration-count属性的值，它指定了应该播放动画的次数。所以不是秒。

如果您想在N秒后停止使用animation-duration，我建议您将动画声明分成几部分，如下所示：

<强> jsfiddle

对于ex你想让旋转旋转2秒，如果你将animation-duration设置为2秒，整个动画将需要2秒才能完成，而这不是你想要的。您希望spin快速旋转2秒，因此您需要计算animation-iteration-count这样的2秒/动画持续时间

假设你希望在0.5秒内完成1轮旋转，你将animation-duration:0.5s然后animation-iteration-count设置为2s / 0.5 = 4

代码：

spin {
  height:50px;
  width:50px;
  background:red;

  -webkit-transform: rotate(45deg);
  transform:  rotate(45deg);
  animation-name:rotation;
  animation-delay:0s;
  animation-duration:0.5s;
  animation-iteration-count:4;
  animation-fill-mode:backwards;
}

有关动画的更多信息，请在此处阅读： CSS3 animation Property

CSS 3停止在页面加载后N秒后旋转动画

1 个答案: