Pacman & Ghost Animation: CSS Tutorial (Day 17 of CSS3 in 30 Days)
video description
Date: 2022-03-14
Related videos
Comments and reviews: 4
Nimish
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;
-
-
reply
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;
-
-
reply
Dimas
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;
-
reply
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;
-
reply
Rolando
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%;
-
-
reply
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%;
-
-
reply
Evan
-show your friends, show your mom, they'll really think your cool that you spent ALOT of time, on your computer making pacman.....-
lol This outro hit me hard
reply
-show your friends, show your mom, they'll really think your cool that you spent ALOT of time, on your computer making pacman.....-
lol This outro hit me hard
reply
Add a review, comment
Other channel videos
