如何制作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/

但关键是，只使用一个动画并以不同角度修改速度值，修改此animation-timing-function。

编辑由于@SirExotic评论，增加了更接近的立方贝塞尔计时功能。

Answer 2

您可以将动画关键帧分成几个，然后调整每个关键帧的百分比来设置相对速度：

90deg的自然百分比为25％。高于此值的任何值都会使这部分变慢

＆＃13;

＆＃13;

img {
  width: 125px;
}

body {
  text-align: center;
}

#loading {
  animation: rotate 4s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg)
  }
  40% {
    transform: rotate(90deg)
  }
  60% {
    transform: rotate(270deg)
  }
  100% {
    transform: rotate(360deg)
  }
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;