如何使CSS动画在完成后不反转？里面的例子答案

【问题标题】：How to make CSS animation not reverse after finishing? Example inside如何使CSS动画在完成后不反转？里面的例子
【发布时间】：2015-12-05 06:52:07
【问题描述】：

我目前有一张使用关键帧旋转和缩放的图片，但我的问题是每次迭代后它都会反转旋转方向。如何阻止这种情况的发生，以使旋转在一个方向上平滑？ JSFiddle。在此处查看完整的网页 HTML：

<html class="fourzerofour">
<head>
  <!-- Hey, look at you, you know how to view the source code, well done! Here's a unicode cookie: ????-->
  <meta charset="UTF-8">
  <title>Egrodo | 404</title>
  <link rel="stylesheet" type="text/css" href="../CSS/error404.css" media="screen, projection" />
  <link rel="stylesheet" type="text/css" href="../CSS/materialize.css" />
  <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
  <link rel='shortcut icon' href='../favicon.ico' type='image/x-icon'/ >
</head>

<body class="fourzerofour">
  <section class="fourzerofour">
    <p class="fourzerofour">
      404 - What have you done?!?
    </p>
    <img draggable="false" class="rotating fourzerofour" src="https://i.imgur.com/n5SVALx.png">
  </section>
</body>

</html>

我的整页 CSS 在这里：

body {
  font-family: 'Raleway', sans-serif;
}
p.fourzerofour {
  font-size: 2.4em;
  color: white;
  display: block;
  margin-top: -2em;
  margin-bottom: 2em;
}

body.fourzerofour {
  height: 100%;
  background-color: darkgrey;
}
section.fourzerofour {
  position: relative;
  height: 100%;
  text-align: center;
  margin-top: 23%;

}

.rotating {
  -webkit-animation: rotating 3s linear infinite;
  -moz-animation: rotating 3s linear infinite;
  -ms-animation: rotating 3s linear infinite;
  -o-animation: rotating 3s linear infinite;
  animation: rotating 3s linear infinite;
  animation-direction: alternate;
  width: 10em;
}

p.fourzerofour + .rotating:active {
  -webkit-filter: invert(1);
}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  50% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1):
  }
  100% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
}

@keyframes rotating {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  50% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) sscale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }
  100% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
}

【问题讨论】：

标签： html css animation keyframe

【解决方案1】：

去掉infinite这一行，去掉50%的关键帧样式，这就是动画的中间部分。而是给 100% 你想要的最终动画样式：JS Fiddle

在动画上附加infinite 将使其不断循环。

.rotating {
  -webkit-animation: rotating 3s linear;
  -moz-animation: rotating 3s linear;
  -ms-animation: rotating 3s linear;
  -o-animation: rotating 3s linear;
  animation: rotating 3s linear;
  animation-direction: alternate;
  width: 10em;

}

p.fourzerofour + .rotating:active {
      -webkit-filter: invert(1);

}

@-webkit-keyframes rotating /* Safari and Chrome */ {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  100% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) scale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1):
  }

}

@keyframes rotating {
  0% {
    -ms-transform: rotate(0deg) scale(.1);
    -moz-transform: rotate(0deg) scale(.1);
    -webkit-transform: rotate(0deg) scale(.1);
    -o-transform: rotate(0deg) scale(.1);
    transform: rotate(0deg) scale(.1);
  }
  100% {
    -ms-transform: rotate(360deg) scale(1);
    -moz-transform: rotate(360deg) scale(1);
    -webkit-transform: rotate(360deg) sscale(1);
    -o-transform: rotate(360deg) scale(1);
    transform: rotate(360deg) scale(1);
  }

}

如果我误解了想要的效果，而您希望它不断向一个方向循环，请参阅@maioman 回答

【讨论】：

感谢您的宝贵时间，但是是的，@maioman 创造了想要的效果。 +1

【解决方案2】：

如果你删除animation-direction:alternate 应该没问题；

fiddle

此外，我在小提琴中调整了旋转

【讨论】：

天哪，你做到了！我知道删除动画方向，但不确定，因为它不会保持循环，但你所做的旋转调整正是我想要的！我会标记为答案，但我不完全确定为什么它起作用..为什么添加 720deg 使它起作用？抱歉，对 CSS 动画非常陌生。再次感谢！
@egrodo 那是因为动画在 720deg 结束，从 0 开始；因为图像的位置在 720 度和 0 度是相同的，所以在 720 度重新启动动画就可以了
哦，他们有吗？这很奇怪.. 所以他们从 720/0 开始，在 720/0 结束，明白了。这是有道理的，我只是不明白为什么它是 720 度而不是 360 度？谢谢！

【解决方案3】：

它有animation: rotating 3s linear infinite，其中infinite 是transition-duration，这里rotating 是transition，即为什么它不断重复它的animation，删除它会为你解决问题。

这里是JSFiddle。

【讨论】：

可以链接到外部资源，但在此处包含完整答案，包括解释。