code

<style>

}

* {

box-sizing: border-box;

}

.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);

}

}

</style>

<img class="head" src="https://file.garden/ZGq2RWLYvB6VkJTh/Banban_Says.png"/>