<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;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.