peeping

<!-- this script got from www.javascriptfreecode.com - Coded by: Krishna Eydat -->
<style>
/*edit this as desired*/
* {
box-sizing: border-box;
}

main {
min-height: 100vh;
width: 100%;
display: flex;
flex-wrap: wrap;
align-content: center;
justify-content: center;
position: relative;
padding: 2em;
}

.head {
position: fixed;
animation: 50s headpopping infinite;
top: 0;
left: 0;
transform: translateY(-50vh) rotate(180deg);
}

@keyframes headpopping {
3%, 8% {
transform: translateY(-50vh) rotate(180deg);
}
6% {
transform: translateY(0) rotate(180deg);
}
10% {
transform: translateY(-50vh) translateX(110vw) rotate(270deg);
}
12%, 20% {
transform: translateY(50vh) translateX(110vw) rotate(270deg);
}
15% {
transform: translateY(50vh) translateX(80vw) rotate(270deg);
}
22% {
transform: translateY(50vh) translateX(110vw) rotate(0);
}
24% {
transform: translateY(110vh) translateX(110vw) rotate(0);
}
26%, 30% {
transform: translateY(110vh) translateX(70vw) rotate(0);
}
28% {
transform: translateY(80vh) translateX(70vw) rotate(0);
}
32% {
transform: translateY(110vh) translateX(70vw) rotate(90deg);
}
34% {
transform: translateY(110vh) translateX(-50vw) rotate(90deg);
}
36%, 40% {
transform: translateY(30vh) translateX(-50vw) rotate(90deg);
}
38% {
transform: translateY(30vh) translateX(0) rotate(90deg);
}
42% {
transform: translateY(-45vh) translateX(-50vw) rotate(230deg);
}
44%, 48% {
transform: translateY(-45vh) translateX(100vw) rotate(230deg);
}
46% {
transform: translateY(-3vh) translateX(85vw) rotate(230deg);
}
50% {
transform: translateY(-45vh) translateX(100vw) rotate(180deg);
}
52%, 56% {
transform: translateY(-45vh) translateX(50vw) rotate(180deg);
}
54% {
transform: translateY(0) translateX(50vw) rotate(180deg);
}
58% {
transform: translateY(-45vh) translateX(-50vw) rotate(0);
}
60% {
transform: translateY(115vh) translateX(-50vw) rotate(0);
}
62%, 65% {
transform: translateY(75vh) translateX(0) rotate(0);
}
72% {
transform: translateY(85vh) translateX(53vw) rotate(0);
}
74% {
transform: translateY(110vh) translateX(53vw) rotate(0);
}
76% {
transform: translateY(110vh) translateX(53vw) rotate(90deg);
}
78% {
transform: translateY(110vh) translateX(-50vw) rotate(90deg);
}
80%, 88% {
transform: translateY(15vh) translateX(-50vw) rotate(90deg);
}
82% {
transform: translateY(15vh) translateX(0) rotate(90deg);
}
83% {
transform: translateY(15vh) translateX(0) rotate(98deg);
}
84% {
transform: translateY(15vh) translateX(0) rotate(83deg);
}
85% {
transform: translateY(15vh) translateX(0) rotate(92deg);
}
86% {
transform: translateY(15vh) translateX(0) rotate(87deg);
}
90% {
transform: translateY(15vh) translateX(-50vw) rotate(180deg);
}
92% {
transform: translateY(-50vh) translateX(-50vw) rotate(180deg);
}
94% {
transform: translateY(-50vh) translateX(0) rotate(180deg);
}
}
code {
display: inline-block;
padding: 1px 7px;
background: #f1f1f1;
border-radius: 5px;
}

</style>
<img class="head" src="https://i.imgur.com/Ncl94bf.png" />
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>