css - 如何制作 CSS 旋转动画？

Question

我正在尝试制作一个在不同度数点具有不同速度的 css 旋转动画。

这是我要制作的动画:

Here is a Pen我目前拥有的，下面是代码:

img {
  width: 125px;
}

body {
  text-align: center;
}

#loading {
  -webkit-animation: slow 1.5s linear 1.5s, fast 1s linear 1s, slow2 1s linear 1s;
  -webkit-animation-iteration-count: infinite;
}

@-webkit-keyframes slow {
  from {
    -webkit-transform: rotate(0deg)
  }
  to {
    -webkit-transform: rotate(90deg)
  }
}

@-webkit-keyframes fast {
  from {
    -webkit-transform: rotate(91deg)
  }
  to {
    -webkit-transform: rotate(270deg)
  }
}

@-webkit-keyframes slow2 {
  from {
    -webkit-transform: rotate(271deg)
  }
  to {
    -webkit-transform: rotate(359deg)
  }
}

<img id="loading" src="https://i.imgur.com/VpLRlbZ.png">

Answer 1

因此，在您提供的示例中，效果仅通过修改 animation-timing-function css 属性来实现。

那么你将只有一个动画

div {
width:100px;
height:100px;
background:red;
animation:rotate 3s  infinite;
animation-timing-function: cubic-bezier(1,0,.5,1);
}

@-webkit-keyframes rotate {
    from { -webkit-transform: rotate(0deg) } 
    to { -webkit-transform: rotate(360deg) } 
}

<div></div>

您可以在这里找到更多信息:https://callmenick.com/dev/level-up-animations-cubic-bezier/

但要点是，只使用一个动画并修改不同 Angular 速度值修改此animation-timing-function。

编辑感谢@SirExotic 评论，添加了更接近三次贝塞尔曲线的计时函数。