Pacman Animation

by Neviton

HTML

<div class="pacman">
	<div class="top-mouth"></div>
	<div class="bottom-mouth"></div>
</div>

<div class="ghost">
	<div class="left-eye"></div>
	<div class="right-eye"></div>
</div>

SCSS

$delay: 0.2s;

body {
	background-color: #777;
}
.pacman {
	width: 50px;
	height: 50px;
	position: relative;
	.top-mouth, .bottom-mouth {
		position: absolute;
		border: solid 25px yellow;
		border-radius: 25px;
		animation-duration: $delay;
		animation-iteration-count: infinite;
		animation-direction: alternate;
	}
	.top-mouth {
		top: 0;
		border-color: yellow yellow transparent transparent;
		animation-name: top-mouth;
	}
	.bottom-mouth {
		border-color: transparent yellow yellow transparent;
		animation-name: bottom-mouth;
	}
}

.ghost {
	width: 50px;
	height: 50px;
	position: relative;
	background-color: blue;
	border-radius: 50% 50% 0 0;
	
	.left-eye, .right-eye {
		position: absolute;
		top: 30%;
		width: 6%;
		height: 6%;
		background-color: #000;
		border: 3% solid #fff;
	}
	.left-eye{
		left: 25%;
		border-radius: 50% 75% 0 75%;
	}
	.right-eye {
		right: 25%;
		border-radius: 75% 50% 75% 0;
	}
}

@keyframes top-mouth {
  from {
    transform: rotate(-47deg);
  }

  to {
    transform: rotate(-90deg);
  }
}

@keyframes bottom-mouth {
  from {
    transform: rotate(47deg);
  }

  to {
    transform: rotate(90deg);
  }
}