Question

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

body {
    padding-top: 50px; 
    font-family: 'passport', sans-serif;
    color: #000;
    background-color: transparent;
}

和我的完整页面CSS：

<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>

Answer 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 answer

Answer 2

它有animation: rotating 3s linear infinite，其中infinite是transition-duration，此处rotating是transition，即为什么它不断重复animation，删除它将为你做到这一点。

这里是JSFiddle。

Answer 3

如果您删除animation-direction:alternate则应该没问题;

fiddle

此外我调整了小提琴的旋转

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

3 个答案: