<div class="layout">
  <div class="parrot">
  </div>
</div>

@-webkit-keyframes party {
	0% {
    -webkit-transform: rotate(0deg);
    background-color: #ffd68c;
  }
	10% { background-color: #8cffff; }
	20% { background-color: #8cff8c; }
	30% { background-color: #8cb5ff; }
	40% { background-color: #d68cff; }
	50% { background-color: #ff8cff; }
	60% { background-color: #d68cff; }
	70% { background-color: #8cb5ff; }
	80% { background-color: #8cffff; }
	90% { background-color: #8cff8c; }
	100% {
    -webkit-transform: rotate(360deg);
    background-color: #ffd68c;
  }
}
.layout {
  padding: 20px 50px;
}
.parrot {
  border: 2px solid #373737;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  background-color: #ffd68c;
  -webkit-animation: party .5s linear infinite;
  -webkit-transform-origin: 20px 35px;
}