CSS Only Crying Baby 404 Error Page Animation

🧠 Description

This project showcases a pure CSS animated 404 error page featuring a crying baby illustration placed between two large “4” digits to visually form 404.

The animation is entirely built using HTML and CSS, without any JavaScript. Keyframe animations control facial expressions, mouth movement, floating motion, and animated tear drops to create a playful yet emotional “page not found” experience.

The design is ideal for creative portfolios, fun websites, or projects that want to turn an error page into an engaging visual moment.

💻** HTML Code**

HTML Explanation

The HTML structure is built entirely with nested div elements to construct the baby illustration:

The .numer spans create the “4 0 4” visual layout.

The .circle acts as the central frame for the animation.

The .bob element represents the baby’s head and body.

Facial features such as ears, nose, mouth, tongue, and neck are all constructed using CSS shapes.

.drops elements create animated tear drops.

.hand elements simulate crying hand gestures.

This semantic separation allows CSS to animate each part independently.

CSS Code

Copy
1*, *:after, *:before {
2  box-sizing: border-box;
3}
4
5body {
6  text-align: center;
7  background: #03a9f4;
8}
9
10.conatiner {
11  position: absolute;
12  left: 50%;
13  top: 50%;
14  transform: translate(-50%, -50%);
15  width: 900px;
16}
17
18.circle {
19  border-radius: 50%;
20  padding: 0;
21  display: inline-block;
22  position: relative;
23  height: 375px;
24}
25.circle:after {
26  content: '';
27  position: absolute;
28  left: 0;
29  top: 0;
30  width: 100%;
31  height: 100%;
32  border: 40px solid #fffbdf;
33  z-index: 50;
34  border-radius: 50%;
35}
36
37.holder {
38  overflow: hidden;
39  width: 366px;
40  height: 345px;
41  border-radius: 50%;
42  position: relative;
43}
44
45.bob {
46  position: absolute;
47  display: inline-block;
48  left: 50%;
49  z-index: 10;
50  transform: translateX(-50%);
51  -webkit-animation: 2s updown ease-in infinite;
52  animation: 2s updown ease-in infinite;
53  top: 100%;
54}
55.bob .nose {
56  position: relative;
57  background: #fdd5b6;
58  border: 3px solid #602f2d;
59  margin: 0 auto;
60  height: 35px;
61  width: 35px;
62  z-index: 15;
63  border-radius: 50% 50% 0 0;
64  top: 8px;
65}
66.bob .nose:after {
67  content: '';
68  position: absolute;
69  left: 5px;
70  top: 12px;
71  height: 7px;
72  width: 7px;
73  border-radius: 50%;
74  background: #602f2d;
75  box-shadow: 13px 0 #602f2d;
76}
77.bob .face {
78  width: 200px;
79  height: 200px;
80  background: #fdd5b6;
81  border: 3px solid #602f2d;
82  border-radius: 50%;
83  position: relative;
84  z-index: 50;
85  box-shadow: 15px 0 #f7c6a4 inset;
86}
87.bob .ear {
88  position: absolute;
89  background: #fdd5b6;
90  border: 3px solid #602f2d;
91  width: 40px;
92  height: 40px;
93  border-radius: 50%;
94  z-index: 15;
95  top: 115px;
96  left: -5px;
97}
98.bob .ear:after, .bob .ear:before {
99  content: '';
100  position: absolute;
101  background: #602f2d;
102  border-radius: 15px;
103  height: 3px;
104  width: 20px;
105  top: 12px;
106  left: 5px;
107}
108.bob .ear:after {
109  transform: rotate(127deg);
110  width: 7px;
111  top: 15px;
112  left: 7px;
113}
114.bob .ear.rgt {
115  left: auto;
116  right: -5px;
117}
118.bob .ear.rgt:after {
119  transform: rotate(47deg);
120  top: 15px;
121  left: 18px;
122}
123.bob .neck {
124  position: relative;
125  background: #fdd5b6;
126  border: 3px solid #602f2d;
127  margin: 0 auto 0;
128  height: 50px;
129  width: 70px;
130  z-index: 15;
131  border-radius: 0 0 50% 50%;
132  top: -8px;
133  box-shadow: 10px 0 #f7c6a4 inset;
134}
135.bob .mouth {
136  position: absolute;
137  border: 3px solid #602f2d;
138  background: #ec7374;
139  width: 80%;
140  height: 80%;
141  left: 0;
142  top: 0;
143  bottom: 0;
144  right: 0;
145  margin: auto;
146  border-radius: 50%;
147  overflow: hidden;
148  -webkit-animation: 1s openclose ease-in infinite;
149  animation: 1s openclose ease-in infinite;
150}
151.bob .mouth:after, .bob .mouth:before {
152  content: '';
153  position: absolute;
154  background: #cc5e64;
155  border: 5px solid #df6062;
156  border-radius: 50%;
157  bottom: 0;
158  left: 0;
159  right: 0;
160  margin: auto;
161  width: 120px;
162  height: 120px;
163  z-index: 2;
164}
165.bob .mouth:after {
166  z-index: 10;
167  bottom: auto;
168  top: 25px;
169  background: #ec7374;
170  height: 40px;
171  width: 40px;
172  border-top-color: transparent;
173}
174.bob .tongue {
175  position: absolute;
176  background: #602f2d;
177  width: 40px;
178  height: 40px;
179  left: 0;
180  bottom: 5px;
181  right: 0;
182  margin: auto;
183  border-radius: 50%;
184  z-index: 5;
185}
186.bob .tongue:after, .bob .tongue:before {
187  content: '';
188  position: absolute;
189  background: #f9adba;
190  border: 3px solid #602f2d;
191  border-radius: 50px;
192  top: 22px;
193  left: -4px;
194  width: 30px;
195  height: 40px;
196  z-index: 2;
197}
198.bob .tongue:before {
199  left: 16px;
200}
201
202.drops {
203  background: #8ecbf9;
204  border: 2px solid #602f2d;
205  width: 20px;
206  height: 20px;
207  border-radius: 50px 50px 0 50px;
208  position: absolute;
209  transform: rotate(-15deg);
210  top: 150px;
211  left: 70px;
212  z-index: 100;
213  -webkit-animation: 2s drop-l ease-in infinite;
214  animation: 2s drop-l ease-in infinite;
215}
216.drops:nth-child(2) {
217  left: auto;
218  right: 70px;
219  transform: rotate(145deg);
220  -webkit-animation: 2s drop-r ease-in infinite;
221  animation: 2s drop-r ease-in infinite;
222}
223.drops:after, .drops:before {
224  content: '';
225  background: #8ecbf9;
226  border: 2px solid #602f2d;
227  width: 20px;
228  height: 20px;
229  border-radius: 50px 50px 0 50px;
230  position: absolute;
231  transform: rotate(-15deg);
232  top: 20px;
233  left: -25px;
234}
235.drops:before {
236  top: -30px;
237  left: 0px;
238}
239
240.hand {
241  border: 3px solid #602f2d;
242  position: absolute;
243  z-index: 50;
244  background: #fdd5b6;
245  width: 25px;
246  height: 15px;
247  border-radius: 20px;
248  bottom: 86px;
249  z-index: 200;
250  left: 64px;
251  transform: rotate(-36deg);
252}
253.hand:after, .hand:before {
254  content: '';
255  border: 3px solid #602f2d;
256  position: absolute;
257  z-index: 50;
258  background: #fdd5b6;
259  width: 25px;
260  height: 15px;
261  border-radius: 20px;
262  z-index: 200;
263  top: 100%;
264  left: 0;
265}
266.hand:before {
267  top: 200%;
268}
269
270.rgt {
271  left: auto;
272  right: 60px;
273  bottom: 96px;
274  transform: rotate(50deg);
275}
276
277.numer {
278  font-size: 500px;
279  display: inline-block;
280  color: #fffbdf;
281}
282@-webkit-keyframes updown {
283  50% , 70% {
284    top: 25%;
285  }
286}
287@keyframes updown {
288  50% , 70% {
289    top: 25%;
290  }
291}
292@-webkit-keyframes openclose {
293  0% , 100% {
294    transform: scale(0.95, 0.95);
295  }
296  50% {
297    transform: scale(1.1, 1.1);
298  }
299}
300@keyframes openclose {
301  0% , 100% {
302    transform: scale(0.95, 0.95);
303  }
304  50% {
305    transform: scale(1.1, 1.1);
306  }
307}
308@-webkit-keyframes drop-l {
309  0% , 50% {
310    opacity: 0;
311    transform: translate(50px, 0) rotate(-15deg);
312  }
313  55% {
314    opacity: 1;
315    transform: translate(0, 0) rotate(-15deg);
316  }
317  70% {
318    opacity: 1;
319    transform: translate(-30px, 0) rotate(-25deg);
320  }
321  85% {
322    opacity: 1;
323    transform: translate(-50px, 100px) rotate(-90deg);
324    opacity: .5;
325  }
326  86% , 100% {
327    opacity: 0;
328  }
329}
330@keyframes drop-l {
331  0% , 50% {
332    opacity: 0;
333    transform: translate(50px, 0) rotate(-15deg);
334  }
335  55% {
336    opacity: 1;
337    transform: translate(0, 0) rotate(-15deg);
338  }
339  70% {
340    opacity: 1;
341    transform: translate(-30px, 0) rotate(-25deg);
342  }
343  85% {
344    opacity: 1;
345    transform: translate(-50px, 100px) rotate(-90deg);
346    opacity: .5;
347  }
348  86% , 100% {
349    opacity: 0;
350  }
351}
352@-webkit-keyframes drop-r {
353  0% , 50% {
354    opacity: 0;
355    transform: translate(-50px, 0) rotate(145deg);
356  }
357  55% {
358    opacity: 1;
359    transform: translate(0, 0) rotate(145deg);
360  }
361  70% {
362    opacity: 1;
363    transform: translate(30px, 0) rotate(160deg);
364  }
365  85% {
366    opacity: 1;
367    transform: translate(50px, 100px) rotate(180deg);
368    opacity: .5;
369  }
370  86% , 100% {
371    opacity: 0;
372  }
373}
374@keyframes drop-r {
375  0% , 50% {
376    opacity: 0;
377    transform: translate(-50px, 0) rotate(145deg);
378  }
379  55% {
380    opacity: 1;
381    transform: translate(0, 0) rotate(145deg);
382  }
383  70% {
384    opacity: 1;
385    transform: translate(30px, 0) rotate(160deg);
386  }
387  85% {
388    opacity: 1;
389    transform: translate(50px, 100px) rotate(180deg);
390    opacity: .5;
391  }
392  86% , 100% {
393    opacity: 0;
394  }
395}

This CSS file is the heart of the animation and illustration.

How it works:

CSS Shapes & Positioning

Every facial feature is drawn using border-radius, borders, and background colors.

Absolute positioning allows precise control over each element.

Floating Motion

The @keyframes updown animation moves the baby vertically to simulate crying movement.

Mouth Animation

The openclose animation scales the mouth to mimic crying and shouting.

Tear Drop Animation

drop-l and drop-r keyframes animate tear drops falling diagonally with fading opacity.

Layering & Depth

Strategic z-index usage ensures proper overlap of hands, face, tears, and frame.

The entire illustration behaves like a vector animation — no images, no SVGs, no JavaScript.