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 CSVCSS:
<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>
Como eu poderia fazer, de outras formas, essa animação acima?
**Observação**: Não é um pedido de ajuda para algo real, mas apenas pra aprender