<div class="background"> <div class="pacman"> <div class="mouth"></div> </div> </div>

body{ background: #000; } @-webkit-keyframes walk{ 0%{ left: 0; } 100%{ margin-left: -215px; left: 100%; } } @-webkit-keyframes eat{ 50%{ border-bottom: 0 solid transparent; border-top: 0 solid transparent; right: -15px; top: 90px; } } @-o-keyframes walk{ 0%{ left: 0; } 100%{ margin-left: -215px; left: 100%; } } @-o-keyframes eat{ 50%{ border-bottom: 0 solid transparent; border-top: 0 solid transparent; right: -15px; top: 90px; } } @keyframes walk{ 0%{ left: 0; } 100%{ margin-left: -215px; left: 100%; } } @keyframes eat{ 50%{ border-bottom: 0 solid transparent; border-top: 0 solid transparent; right: -15px; top: 90px; } } .background{ /*border: 1px solid;*/ position: relative; } .pacman{ -o-animation: walk 10s infinite; -webkit-animation: walk 10s infinite; animation: walk 10s infinite; background: #fffc07; border-radius: 100%; height: 200px; position: absolute; width: 200px; } .pacman::before{ background: #000; border-radius: 100%; content: ''; height: 37px; position: absolute; right: 60px; top: 30px; width: 24px; } .mouth{ -o-animation: eat 0.7s infinite; -webkit-animation: eat 0.7s infinite; animation: eat 0.7s infinite; border-top: 80px solid transparent; border-bottom: 80px solid transparent; border-right:60px solid #ff0000; border-radius: 0 100% 100% 0; position: absolute; right: -1px; top: 20px; z-index: 3; }