<div class="pacman"></div>
.pacman {
  width: 100px;
  height: 100px;
  position: relative;
  animation: move 5s linear infinite;
}

@keyframes move {
  0% {
    transform: 
      translateX( 0 ) rotateY(0deg) ;
  }
  45% {
    transform: 
      translateX( calc(100% * 10) ) rotateY(0deg);
  }
  50% {
    transform: 
      translateX( calc(100% * 10) )
      rotateY(180deg);
  }
  95% {
    transform: 
      translateX( 0% ) rotateY(180deg);
  }
  100% {
    transform: 
      translateX( 0 ) rotateY(0deg);
  }
}

.pacman:before{
  content: "";
  width: 0px;
  height: 0px;
  position: absolute;
  border-top: calc(100px / 2) solid #ee3;
  border-right: calc(100px / 2) solid transparent;
  border-bottom: calc(100px / 2) solid #ee3;
  border-left: calc(100px / 2) solid #ee3;
  border-radius: 50%;
  animation: to-down 1s linear infinite;
}

@keyframes to-down {
  0% {
    transform: rotate( 0deg )
  }
  50% {
    transform: rotate( 45deg );
  }
  100% {
    transform: rotate( 0deg );
  }
}

.pacman:after {
  content: "";
  width: 0;
  height: 0;
  position: absolute;
  border-top: calc(100px / 2) solid #ee3;
  border-right: calc(100px / 2) solid transparent;
  border-bottom: calc(100px / 2) solid #ee3;
  border-left: calc(100px / 2) solid #ee3;
  border-radius: 50%;
  
  animation: to-up 1s linear infinite;
}

@keyframes to-up {
  0% {
    transform: rotate( 0deg )
  }
  50% {
    transform: rotate( -45deg );
  }
  100% {
    transform: rotate( 0deg );
  }
}

body {
  background: #333;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.