eater.css

.eater{
    position: relative;
    width: 100%;
    height: 100%
}
.eater-bottom-holder,.eater-top-holder{
    width: 100%;
    height: 50%;
    overflow: hidden;
}
.eater-top-holder{
    transform-origin: bottom left;
    animation-name: animated-eater-top;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
.eater-bottom-holder{
    top:50%;
    transform-origin: top left;
    animation-name: animated-eater-bottom;
    animation-duration: 0.5s;
    animation-iteration-count: infinite;
}
@keyframes animated-eater-top {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(-20deg);}
}
@keyframes animated-eater-bottom{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(10deg);}
}
.eater-top{
    width: 100%;
    height: 200%;
    background: yellow;
    border-radius: 50%;
}
.eater-bottom{
    position: relative;
    width: 100%;
    height: 200%;
    background:yellow;
    border-radius: 50%;
    top: -100%;
}