Skip to main content
Aviso removido Chamar atenção por Wallace Vizerra
Fim da Recompensa com hugocsl's answer escolhido por Wallace Vizerra
Aviso adicionado Chamar atenção por Wallace Vizerra
Recompensa Oferecida vale 50 pontos de reputação por Wallace Vizerra
Tweeted twitter.com/StackOverflowPT/status/1025124328311074817
conteúdo editado
Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

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

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:

<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

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:

<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
Fonte Link
Wallace Vizerra
  • 107,4mil
  • 106
  • 440
  • 920

Como poderia fazer um pacman mexendo a boca com CSS puro?

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:

<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