Как сделать вращающуюся анимацию CSS?

Question

Я пытаюсь сделать анимацию вращения CSS, которая имеет разные скорости в разных точках.

Вот анимация, которую я пытаюсь сделать:

Вот ручка того, чтоУ меня в данный момент есть и ниже код:

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

Вы можете просто разделить ключевые кадры анимации на несколько и настроить процент каждого из них, чтобы установить относительные скорости:

естественный процент для 90 градусов будет 25%.Любое значение выше этого сделает эту часть медленнее

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

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

Answer 2

Итак, в приведенном вами примере эффект достигается только путем изменения свойства 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.