如何让CSS动画完成后不反转？里面的例子

Question

我目前有一张使用关键帧旋转和缩放的图片，但我的问题是每次迭代后它都会反转旋转方向。我如何阻止这种情况发生，以便在一个方向上平滑旋转？ 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);
  }
}

Answer 1

它有 animation: rotating 3s linear infinite，其中 infinite 是 transition-duration，这里 rotating 是 transition 即为什么它不断重复其 animation, 删除它就可以了。

这里是JSFiddle.

Answer 2

删除 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 的回答

Answer 3

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

fiddle

此外我在fiddle

中调整了旋转

如何让CSS动画完成后不反转？里面的例子

How to make CSS animation not reverse after finishing? Example inside

html

css

animation

keyframe