How could you make a Pacman by moving your mouth with pure CSS?

Question

In order to go deeper into the CSS, I would like to know different ways of making animations. My goal is to know some new properties and features that CSS has been implementing.

In the specific case, I would like to know what would be the simplest way to make a Pacman by moving his mouth.

I have a small outline of what I could learn from SVG and 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>

How could I do, in other ways, this animation above?

_{Observing: It’s not a cry for help for something real, but just to learn}

Answer 1

Here are examples with CSS only.

Option 1: Made with border-Radius

No need to use this option position relative or absolute, nor need to put the divs within a container There are only two Divs with border-radius.

Then you make a keyframe simple rotating one to one side and the other to the other and the Pac-man makes the movement!

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>

---

Option 2: edged

The stuff is simple, are two Ivs overlapped with position:absolute. One has the yellow top edges and the transparent bottom edges. The second div is unlike the transparent top part.

Here is the same principle of @keyframes spinning the divs inversely. Note that it is all done with edges...

Follow the example.

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>

---

In the Future

OBS: Soon CSS "4" should implement the conic-gradiente() and with it this kind of animation will get easier. Here is the documentation https://www.w3.org/TR/css-images-4/#Conic-gradients

As it is not yet possible to animate gradients (be it any kind), you have to do an animation by Steps changing the values in the hand for each fraction of the animation. Logically the more you do, the more fluid the animation will be, I did this example just for educational purposes, here is the Mozilla documentation on the conic-gradient https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient

Code of the image above (This code does not work in Firefox at the moment, *but very soon it will work on Edge, because he’s migrating to engined 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>

Article about the Conic-gradient: https://css-tricks.com/snippets/css/css-conic-gradient/

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

• Example application for the Conic-gradient. To make the Pacman would be something like done in the third example.

Current support of browsers: https://caniuse.com/#feat=css-Conic-gradients

Of the largest only the Firefox does not yet accept the conic-gradients

Answer 2

In HTML you can think about creating 3 elements:

• 2 elements will be the basis and will use ::before and ::after (but can use Divs also the main element will be to group)

• The third element will be the main one, which receives the pseudo elements

The pseudo elements ::before and ::after will be the "body", whereas the main element will be the one that will adjust the position of the sub(pseudo)-elements

The ::after will be the bottom and will receive border-radius: 100% to turn a circle, with linear-gradient we make it only half filled.

The ::before will be the top part, it is identical, you could just reverse the order of the colors in the linear-gradient, but I personally find it much more practical to do this using transform: rotate(180deg); that will turn the element upside down (I understand that it can rotate in several ways, but the effect is the same at the end):

The static example without animation to see the body ready:

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>

Okay, we have the basis of our Pacman, the second part is to apply the animation, but for that we need to create an animation for the top and the bottom.

The ::before will animate normally from the rotation 0deg go to the desired rotation (in the example I applied 30deg but you can change that) and then go back to 0deg (I know you can adjust the return on own animate, but the effect is the same and is for didactic purposes, comment)

The ::after will cheer up the bottom so he’ll start from the 180deg and you can apply the lower value so that the lower part does the reverse rotation, in the example I used 150deg, you can adjust that too.

You can also change the movement of the bottom or top, including can apply different speeds, changing the .5s of each animate, is at your discretion, the example is simple and fully customizable:

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>