<section>
    <div class="field">
    <div class="fuel" style="--i:1"></div>
    <div class="fuel" style="--i:2"></div>
    <div class="fuel" style="--i:3"></div>
    <div class="fuel" style="--i:4"></div>
    <div class="fuel" style="--i:5"></div>
    <div class="fuel" style="--i:6"></div>
    <div class="fuel" style="--i:7"></div>
    <div class="fuel" style="--i:8"></div>
    <div class="fuel" style="--i:9"></div>
    <div class="fuel" style="--i:10"></div>
    <div class="pack-man">
        <div></div>
    </div>
</div>
</section>

*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {background: #333;}

.loading {
position: relative;
width: 200px;
height: 200px;
}

section {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}

.field {
width: 280px;
height: 200px;
position:relative;
}

.fuel {
position: absolute;
width: 40px;
height: 40px;
border-radius: 50%;
background: yellow;
transform: scale(.8);
animation: fuel ease-in 10s calc(1s * var(--i) - 1s) infinite;
}
@keyframes fuel {
0%,10%{transform: scale(.3);}
50%{transform: scale(.8);}
}

.fuel:nth-child(1) { top: 0;left: 0;}
.fuel:nth-child(2) { top: 0;left: 80px;}
.fuel:nth-child(3) { top: 0;right: 80px;}
.fuel:nth-child(4) { top: 0;right: 0;}
.fuel:nth-child(5) { top: 80px;right: 0;}
.fuel:nth-child(6) { bottom: 0;right: 0;}
.fuel:nth-child(7) { bottom: 0;right: 80px;}
.fuel:nth-child(8) { bottom: 0;left: 80px;}
.fuel:nth-child(9) { bottom: 0;left: 0;}
.fuel:nth-child(10) { top: 80px;left: 0;}

.pack-man {
position:relative;
width: 60px;
height:60px;
top: -10px;
left: -10px;
animation: movement linear 10s 0s infinite;
}
@keyframes movement {
0%{transform: rotate(0deg);}
30%{transform: translate(240px,0);}
30.1%{transform:translate(240px,0) rotate(90deg);}
50%{transform:translate(240px,160px) rotate(90deg);}
50.1% {transform:translate(240px,160px) rotate(180deg);}
80%{transform:translate(0px,160px) rotate(180deg);}
80.1%{transform:translate(0px,160px) rotate(270deg);}
99%{transform:translate(0px,0px) rotate(270deg);}
99.1%{transform:translate(0px,0px) rotate(0deg);}
}

.pack-man div {
position: abosolute;
width: 30px;
height: 60px;
background: yellow;
border-radius: 30px 0 0 30px;
}

.pack-man div::before,
.pack-man div::after {
content: "";
display: block;
width: 60px;
height: 30px;
background: yellow;

}

.pack-man div::before {
top:0;
border-radius: 30px 30px 0 0;
transform-origin: center bottom;
transform: rotate(-40deg);
animation: eat1 linear .5s .3s infinite alternate;
}
@keyframes eat1 {
100%{transform: rotate(5deg);}
}

.pack-man div::after {
bottom:0;
border-radius:0 0 30px 30px;
transform-origin: center top;
transform: rotate(40deg);
animation: eat2 linear .5s .3s infinite alternate;
}
@keyframes eat2 {
100%{transform: rotate(-5deg);}
}