使用 CSS3 动画将元素旋转到 360 度

Question

我正在尝试使用 CSS3 创建加载器动画。这是代码：

如果你看一下代码，我在 @keyframe defn 中输入了 css，用于将正方形从 0deg 旋转到 360deg（就像以下）。但是骰子没有旋转。请帮助解决这个问题，如果您需要更多详细信息，也请告诉我。

@keyframes tilt{
  0%{
    transform: scale($scaleMin) rotate($rotateStart);
  }
  50%{
   transform: scale($scaleMax);
   background: #BC11FF;
   box-shadow: 0 0 2px #D467FF;
  }
  95%,100%{
   transform: scale($scaleMin) rotate($rotateEnd);
   background: #11A8FF;
   box-shadow: none;
  }
}

PS。 CSS在代码示例中使用SCSS编写。

Answer 1

50% 部分缺少 rotate()。

$rotateMid: 225deg;/*added, adjust the value as needed*/

span {
  animation: tilt #{$animDuration}s linear infinite; /*changed to linear*/
}

50%{
  transform: scale($scaleMax) rotate($rotateMid); /*changed/added*/
}

更新：http://codepen.io/anon/pen/QbJmbO?editors=110

转换计时函数之间的差异：

ease-in will start the animation slowly, and finish at full speed.

ease-out will start the animation at full speed, then finish slowly.

ease-in-out will start slowly, be fastest at the middle of the animation, then finish slowly.

ease is like ease-in-out, except it starts slightly faster than it ends.

linear uses no easing.

来源：

使用 CSS3 动画将元素旋转到 360 度

Rotate element to 360deg using CSS3 Animation

css

css-animations