20

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

3
  • Wallace kkkkk ta faltando muita coisa mesmo uhehueuheuhe, mas eu deletei o comentário pois entendi direito qual foi o objetivo da pergunta... tem outras maneiras sim Commented 2/08/2018 às 19:29
  • 1
    e o pacman não tem olhinho ;) Commented 2/08/2018 às 19:30
  • 1
    Resposta editada com mais uma opção, a técnica é até mais simples que a primeira que eu tinha dado...
    – hugocsl
    Commented 11/08/2018 às 12:40

2 Respostas 2

31
+50

Seguem exemplos apenas com CSS.

Opção 1: Feita com border-radius

Nessa opção não precisa usar position relative ou absolute, nem precisa de colocar as divs dentro de um container São apenas duas divs com border-radius.

Depois vc faz um keyframe simples rotacionando uma para um lado e outra para o outro e o pac-man faz o movimento!

body { background: black; }

.topo, .base {
    background-color: gold;
    width: 200px;
    height: 100px;
    border-radius: 100px 100px 0 0;
    animation: comex 500ms linear infinite;
}
.base {
    border-radius: 0 0 100px 100px;
    animation: comey 500ms linear infinite;
}
@keyframes comex {
    50% {
        transform: rotate(-15deg);
    }
}
@keyframes comey {
    50% {
        transform: rotate(15deg);
    }
}
<div class="topo"></div>
<div class="base"></div>


Opção 2: feita com bordas

A bagulho é simples, são duas divs sobrepostas com position:absolute. Uma tem as bordas de cima amarela e as bordas de baixo transparente. A segunda div é ao contrário com a parte de cima transparente.

Aqui é o mesmo principio dos @keyframes girando as divs inversamente. Repare que é tudo feito com bordas...

Segue o exemplo.

html {
width: 100%;
height: 100%;
background-image: linear-gradient(to bottom, tomato, skyblue);
background-repeat: no-repeat;
}

.container {
    position: relative;
    width: 200px;
    height: 200px;
}
.pac, .boca {
    position: absolute;
    box-sizing: border-box;
    border: 100px solid gold;
    border-radius: 50%;
    transform: rotate(-45deg);
}
.pac {

    border-bottom-color: transparent;
    border-left-color: transparent;
    animation: comex 500ms linear infinite;
}
.boca {
    border-top-color: transparent;
    border-right-color: transparent;
    animation: comey 500ms linear infinite;
}
@keyframes comex {
    50% {
        transform: rotate(-75deg);
    }
}
@keyframes comey {
    50% {
        transform: rotate(-15deg);
    }
}
<div class="container">
    <div class="pac"></div>
    <div class="boca"></div>
</div>


No Futuro

OBS: Em breve o CSS "4" deve implementar o conic-gradiente() e com ele esse tipo de animação vai ficar mais fácil. Aqui está a documentação https://www.w3.org/TR/css-images-4/#conic-gradients

Como ainda não é possível animar gradientes (seja ele de qualquer tipo), vc tem que fazer uma animação por steps mudando os valores na mão para cada fração da animação. Logicamente quanto mais steps vc fizer, mais fluida vai ficar a animação, eu fiz esse exemplo apenas para fins didáticos, aqui tem a documentação do Mozilla sobre o conic-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient

inserir a descrição da imagem aqui

Código da imagem acima (Esse código não funciona no FireFox no momento, *mas muito em breve vai funcionar no Edge, pois ele está migrando a enginee para Chrommium*)

html, body {
    width: 100%;
    height: 100%;
    background-color: black;
    margin: 0;
}
.pac {
    margin: 20px;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: conic-gradient(gold 90deg, transparent 90deg, transparent 90deg, gold 90deg);
    /* background: gold; */
    animation: pac 1s linear infinite;
}
@keyframes pac {
    0% {
        background: conic-gradient(gold 45deg, transparent 45deg, transparent 125deg, gold 125deg);
    }
    25% {
        background: conic-gradient(gold 65deg, transparent 65deg, transparent 105deg, gold 105deg);
    }
    50% {
        background: conic-gradient(gold 90deg, transparent 90deg, transparent 90deg, gold 90deg);
    }
    75% {
        background: conic-gradient(gold 65deg, transparent 65deg, transparent 105deg, gold 105deg);
    }
    100% {
        background: conic-gradient(gold 45deg, transparent 45deg, transparent 125deg, gold 125deg);
    }
}
<div class="pac"></div>

Artigo sobre o conic-gradiente: https://css-tricks.com/snippets/css/css-conic-gradient/

Polyfill: https://leaverou.github.io/conic-gradient/

  • Exemplo de aplicação para o conic-gradiente. Para fazer o Pacman seria algo como feito no terceiro exemplo.

inserir a descrição da imagem aqui

Suporte atual dos Browsers: https://caniuse.com/#feat=css-conic-gradients

Dos maiores apenas o FireFox ainda não aceita o conic-gradients

inserir a descrição da imagem aqui

9
  • 3
    Mais lindo que CSS é a criatividade que a pessoa precisa ter para conseguir aplicar tudo o que o CSS propõe. Fico fascinado, de verdade! Commented 2/08/2018 às 20:03
  • 2
    @PedroAugusto cara CSS é tipo a Matrix, depois que vc entra nela e começa a entender de fato o que se está fazendo vc fica fascinado. Além disso com CSS quase sempre tem mais de um jeito de fazer a mesma coisa, realmente é muito legal. Tmj
    – hugocsl
    Commented 2/08/2018 às 20:06
  • 2
    Perfeito a sua resposta. Commented 11/08/2018 às 16:12
  • 1
    @MatheusMiranda valeu a força! E o mais legal é que já é possível usar do IE10 para frente! Depois quando vier os conic-gradients as possibilidades com CSS vão ficar ainda mais divertidas :)
    – hugocsl
    Commented 11/08/2018 às 17:37
  • 2
    @hugocsl sim principalmente para os joguinhos. Commented 11/08/2018 às 18:03
21

Em HTML você pode pensar em criar 3 elementos:

  • 2 elementos serão a base e usarei ::before e ::after (mas pode usar divs também o elemento principal será para agrupar)

  • O terceiro elemento será o principal, que recebe os pseudos elementos

Os pseudo elementos ::before e ::after serão o "corpo", já o elemento principal será o que irá ajustar a posição dos sub(pseudo)-elementos

O ::after será a parte de baixo e receberá border-radius: 100% para virar um circulo, com linear-gradient fazemos ele ficar apenas metade preenchido.

O ::before será o a parte de cima, ele é idêntico, você poderia simplesmente inverter a ordem das cores no linear-gradient, mas eu pessoalmente acho muito mais pratico fazer isto usando transform: rotate(180deg); que vai virar o elemento de ponta cabeça (eu entendo que dá para rotacionar de diversas formas, mas o efeito é o mesmo no final):

O exemplo estático sem animação para ver o corpo pronto:

body {
    background: black;
}

/* todos elementos devem ter a mesma altura, a não ser que queira aplicar margens */
.pacman-css, .pacman-css::before, .pacman-css::after {
    width: 100px;
    height: 100px;
}

.pacman-css {
     position: relative;
}

.pacman-css::before, .pacman-css::after {
    content: "";
    display: block;

    /*posiciona ambos elementos no mesmo lugar*/
    position: absolute;
    top: 0;
    left: 0;

    /* aplica a borda para transformar em um circulo */
    border-radius: 100%;

    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,
                                           rgba(0,0,0,0) 50%,
                                           yellow 50%);
    /*Aplica o amarelo do 50% até o 100%, ou seja NÃO é necessário aplicar yellow 100% depois */
}

/* o before deve ser a de cima */
.pacman-css::before {
     transform: rotate(180deg);
}
<div class="pacman-css">
</div>

Pronto, temos a base do nosso pacman, a segunda parte é aplicar a animação, mas para isso é preciso criar uma animação para a parte de cima e outra para a de baixo.

O ::before vai animar normalmente a partir da rotação 0deg ir até a rotação desejada (no exemplo apliquei 30deg mas você pode mudar isso) e depois voltar ao 0deg (sei que dá pra ajustar o retorno no próprio animate, mas o efeito é o mesmo e é para fins didáticos, sugestões comentem)

O ::after vai animar a parte de baixo, portanto ele vai começar do 180deg e você pode aplicar o valor menor para que a parte de baixo faça a rotação invertida, no exemplo usei 150deg, você pode ajustar isso também.

Você também pode mudar a movimentação da parte de baixo ou da cima, inclusive pode aplicar diferentes velocidades, trocando o .5s de cada animate, fica a seu critério, o exemplo é simplório e totalmente customizável:

body {
    background: black;
}

.pacman-css, .pacman-css::before, .pacman-css::after {
    width: 100px;
    height: 100px;
}

.pacman-css {
     position: relative;
}

.pacman-css::before, .pacman-css::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    border-radius: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,
                                           rgba(0,0,0,0) 50%,
                                           yellow 50%);
}

.pacman-css::before {
     transform: rotate(180deg);
     animation: anima-pacman-cima .5s infinite;
}

.pacman-css::after {
     animation: anima-pacman-baixo .5s infinite;
}

@keyframes anima-pacman-cima
{
    0%   { transform: rotate(180deg); }
    50%  { transform: rotate(150deg); }
    100% { transform: rotate(180deg); }
}

@keyframes anima-pacman-baixo
{
    0%   { transform: rotate(0deg);  }
    50%  { transform: rotate(30deg); }
    100% { transform: rotate(0deg);  }
}
<div class="pacman-css">
</div>

1
  • 2
    Ótimo exemplo também! Talves até mais simples
    – hugocsl
    Commented 2/08/2018 às 20:22

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .