How to smoothly end an animation?

Question

css

How to smoothly end the animation, that is, create the effect that the wheel rolls out when scrolling and stops?

https://jsfiddle.net/xng891zp/4/

Answer 1

brake wheel

header {
  height: 1000px;
  background-color: green;
  text-transform: uppercase;
}
footer {
  height: 600px;
  background-color: blue;
}
.wheel {
  width: 250px;
  height: 250px;
  position: relative;
  left: -250px;
  
}
.wheel.active-left {
  left: calc(50% - 125px);
  transition: all 3s ease-out;
  transform: rotate(600deg);
}