Pacman & Ghost Animation: CSS Tutorial (Day 17 of CSS3 in 30 Days)

Use CSS to create n animation of Pacman chomping and chasing a ghost along this container element!

⭐️Files you need ⭐️

--

[evanrost]

"show your friends, show your mom, they'll really think your cool that you spent ALOT of time, on your computer making

lol This outro hit me hard

[danielcorrea]

Excelent!!! Congrats and thank you about the series of CSS videos.

[igodsuttakuruvi]

Happy Programmers Day Mr.Brad! Thanks for being so awesome.

[kashilju]

Very beautiful, the explication of your course is very very easy and I understand 90% of course, thank you

[wethekidsz]

Osum!!! would've been kooler if there was a way of getting the dots disappear off but, crazy nonetheless!

EDIT:
k.. so I made that work by creating another empty div inside path (named it .path1) and transitioning its width to 1400px as ease-out with delay of 1.8s.. it does appear as if the pacman is eating away the dots but not that well though cause his chomps are kinda eating them away before he comes closer LOL (cause ease-out, right?) no other transition seemed to work out better.. linear was a disaster and so were others.. this was as much as I could do:

.path1 {
position: relative;
width: 10px;
height: 100%;
background: #333;
padding: 20px;
box-sizing: border-box;
overflow: hidden;
animation: disappear 5s ease-out infinite;
animation-delay: 1.8s;
z-index: 99;
}
.path1:after {
content: "";
position: absolute;
border: none;
color: #333;
}

@keyframes disappear {
0% {
width: 10px;
}
100% {
width: 1400px;
}
}

[techparavai]

superb work all most understood. how to that dot remove after moving packman.

[Rolanditou]

Great Tutorial Thank You So Much !!! Here goes another cool animation for the ghost :

insert this into the ghost css class :
top: 45%;
animation: wavyMovement 1s linear infinite;

then add this keyframe at the end :
@keyframes wavyMovement {
0%, 100% {
top: 45%;
} 50% {
top: 55%;
}
}

[MukeshKumar-coky]

in mouthtop animation, why we have taken 50% in keyframes?

[dimashadiazra]

Try to add this pseudo after .path and see what would happen:

.path::before {
position: absolute;
content: "";
display: block;
left: -20%;
width: 20%;
height: 100%;
margin: -20px;
background: linear-gradient( to right, transparent 40%, #333 60% );
z-index: 50;
animation: moveForward 5s linear infinite;
animation-delay: 1.4s;
}

[lukaskovar]

Where i can download the meter tool which you are using in this video ?

[moonsdonut]

Wow this is the best thing if seen in css