html {
  text-align: center;
}
.box {
  background: blue;

  width: 225px;
  height: 225px;
  margin: 55px auto;
}
.circle {
  background: green;
  border-radius: 50%;

  width: 225px;
  height: 225px;
  margin: 55px auto;
  
  transform: rotate(360deg);
}
.rotate {
  transition: all 1s steps(16);
}