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

Posted 2023-03-06

【中文标题】使用 CSS3 动画将元素旋转到 360 度

【英文标题】：Rotate element to 360deg using CSS3 Animation

【发布时间】：2015-10-19 08:06:21

【问题描述】：

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

http://codepen.io/raaj-obuli/pen/RPeLer

如果您查看代码，我在@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 编写的。

【问题讨论】：

在50% 关键帧块中添加rotate($rotateMid) 可能会对您有所帮助？

不。在 50% 处添加 'rotate()' 会导致动画在中间暂停几秒钟。

那个暂停要感谢ease-out。如果您可以将其设置为linear 并将您的$rotateMid 设置为180deg 并将此$rotateMid 应用于50% 块，这可能会产生您正在寻找的结果。

是的，正如@TahirAhmed 所说，使用线性动画：倾斜 #$animDurations 线性无限；

这行得通！非常感谢@TahirAhmed。

【参考方案1】：

50% 部分中缺少 rotate()。

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

span 
  animation: tilt #$animDurations linear infinite; /*changed to linear*/


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

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

过渡计时函数的区别：

ease-in 会慢慢开始动画，然后全速结束。 ease-out 会全速开始动画，然后慢慢结束。 ease-in-out 会慢慢开始，在动画中间最快，然后慢慢结束。 ease 与 ease-in-out 类似，只是它开始的速度比结束的速度稍快。 linear 不使用缓动。

来源：https://***.com/a/9636239/483779

【讨论】：

这就是我想要实现的目标，codepen.io/raaj-obuli/pen/RPeLer?editors=110。但是请注意，我不希望在第 50% 关键帧处出现暂停。我只需要一个平稳的旋转。

如果你不介意，我只想在这里问你另一个与@keyframe 相关的查询。根据 MDN 文档 (developer.mozilla.org/en-US/docs/Web/CSS/@keyframes)，关键帧之间的任何遗漏属性都将被插值（除非未在第一个和最后一个关键帧中定义）。我只是想知道，为什么 50% 的 rotate() 属性值没有在这里插值？

我认为问题是你之前的关键帧设置是invalid，而不是interpolated。