How do I make a CSS Rotating Animation?

Question

I'm trying to make a css rotation animation that has different speeds at different degree points.

Here is the animation I'm trying to make:

Here is a Pen of what I currently have and below is the code:

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

So, in the example you provided, the effect is only done by modifying the animation-timing-function css property.

Then you'll have only one animation

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>

You can find more informations here : https://callmenick.com/dev/level-up-animations-cubic-bezier/

But the point is, use only one animation and modify speed at different angles value modifying this animation-timing-function.

EDIT Added a closer cubic bezier timing function thanks to @SirExotic comment.

Answer 2

You can just divide the animation keyframes into several ones, and adjust the percentages of each to set the relative speeds:

The natural percentage for 90deg would be 25% . Any value higher than that will make this part slower

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">