DEV Community

Cover image for Animated pacman in HTML/CSS
Leiv Fredrik Berge
Leiv Fredrik Berge

Posted on

4 2

Animated pacman in HTML/CSS

You never know when you need a pacman to appear on your site. And when you do, you need it to be lightweight and performant.

Inspired by https://codepen.io/wifi, https://codepen.io/wifi/pen/olKxE

Lets make our pacman HTML structure, eye is optional I guess.

  <div class="pacman">
    <div class="eye"></div>    
  </div>
Enter fullscreen mode Exit fullscreen mode

My pacman is more squareish, since that is what i needed, feel free to change the border radius to 50%, and have a more default looking figure.

.pacman {
  background-color: yellow;
  border-radius: 24px;
  height: 210px;
  width: 210px;
  clip-path: polygon(100% 0, 100% 25%, 50% 50%, 50% 50%, 100% 75%, 100% 100%, 0 100%, 0 0);
}
Enter fullscreen mode Exit fullscreen mode

Screenshot 2021-07-01 at 14-36-41 CSS3 Animated Pacman

Lets animate it! Drop the clip-path, and add the keyframe animation. Set it to infinite and alternate direction. An unnessesary complicated animation curve, and your pacman lives!

.pacman {
  animation: mouth .35s infinite cubic-bezier(0.85, 0, 0.15, 1);
  animation-direction: alternate;
}

@keyframes mouth {
  0% { clip-path: polygon(100% 0, 100% 25%, 50% 50%, 50% 50%, 100% 75%, 100% 100%, 0 100%, 0 0) }
  100% { clip-path: polygon(100% 0, 100% 50%, 50% 50%, 50% 50%, 100% 50%, 100% 100%, 0 100%, 0 0) }
}
Enter fullscreen mode Exit fullscreen mode

All together with some food:

Heroku

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More

Top comments (2)

Collapse
 
cmuralisree profile image
Chittoji Murali Sree Krishna

Nice work, 👍

Collapse
 
lfbergee profile image
Leiv Fredrik Berge

Thanks ☺️

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Please leave a ❤️ or a friendly comment on this post if you found it helpful!

Okay