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 CSV: <!-- 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>