JSFiddle - React, Tailwind, and code Playground
HTML
<div id="skull"></div>
CSS
@keyframes rotate-skull {
0% {
transform: rotate(0deg)
}
25% {
transform: rotate(15deg)
}
50% {
transform: rotate(-5deg)
}
55% {
transform: rotate(0deg)
}
75% {
transform: rotate(-10deg)
}
100% {
transform: rotate(0deg)
}
}
#skull {
background: url("http://david.blob.core.windows.net/html5/css3atat/atat-skull.png") left center no-repeat;
width: 186px;
height: 123px;
position: absolute;
top: 100px;
left: 200px;
animation-name: rotate-skull;
animation-duration: 7s;
animation-iteration-count: infinite;
transform-origin: 0 50%;
}