Com a finalidade de me aprofundar mais no CSS, eu gostaria de saber diferentes formas de fazer animações. Meu objetivo é saber algumas propriedades e recursos novos que o CSS vem implementando.

No caso específico, eu gostaria de saber quais seria a forma mais simples de se fazer um Pacman mexendo a boca.

Eu tenho um pequeno esboço do que pude aprender com SVG e CSS:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-html -->


    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
        <style>
            .circle {
            stroke-dasharray: 151, 158;
            animation: packman .4s infinite ease;
            stroke-width: 50;
            stroke: yellow;
            fill: transparent;
            }

            @keyframes packman{
            
            from {
                stroke-dasharray: 151, 158;
            }
            
            to {
                stroke-dasharray: 158, 158;
            }
            
            }
        </style>
        <circle r='25' cy='50' cx='50' class="circle"></circle>
    </svg>

<!-- end snippet -->


Como eu poderia fazer, de outras formas, essa animação acima?

<sub>
**Observação**: Não é um pedido de ajuda para algo real, mas apenas pra aprender
</sub>