Animated CSS Pacman

Playing around with simple CSS animations and figured pacman would be an easy one to practice.

<html>
<body>
<div id="pacman">
    <div id="top"></div>
    <div id="dot" class="dot_1"></div>
    <div id="dot" class="dot_2"></div>
    <div id="dot" class="dot_3"></div>
    <div id="bottom"></div>
</div>
</body>
</html>

Started off with building pacman using two half circles, then animating them to slightly rotate to creating the eating motion.

#top {
    height: 100px;
    width: 200px;
    border-radius: 100px 100px 0 0;
    background-color: yellow;
    animation: top 0.5s linear infinite;
    transform-origin: center bottom;
}

#bottom {
    height: 100px;
    width: 200px;
    border-radius: 0 0 100px 100px;
    background-color: yellow;
    animation: bottom 0.5s linear infinite;
    transform-origin: center top;
}

@keyframes top {
    0% {
        transform: rotate(-30deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(-30deg);
    }
}

@keyframes bottom {
    0% {
        transform: rotate(30deg);
    }
    50% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(30deg);
    }
}

Then I added the dots to finish it off nicely.

#dot {
    position: absolute;
    z-index: -1;
    top: 50%;
    margin-top: -10px;
    height: 20px;
    width: 20px;
    border-radius: 10px;
    background-color: white;
}

.dot_1 {
    animation: dot 1.5s linear 1.5s infinite;
}

.dot_2 {
    animation: dot 1.5s linear 1s infinite;
}

.dot_3 {
    animation: dot 1.5s linear 0.5s infinite;
}

@keyframes dot {
    0% {
        left: 300px;
    }
    100% {
        left: 0px;
    }
}

Put it all together and voila, an animated pacman using only css. Maybe I’ll try adding one of the ghosts next time to take it up another level. I also want to try an interactive version after that, but I want to try different CSS drawings in the meantime to improve my skillset.

See the Pen css by Wilfrido Reyes (@imwil) on CodePen.

View the full code on CodePen.

Leave a Reply

Your email address will not be published. Required fields are marked *