← back to Only CSS: Cry Babycompare with ground truth →
model output
LLaMA 4 Scout
Only CSS: Cry Baby
A 0.31T 0.00
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Eyes Animation</title>
7 <style>
8 .eyes {
9 position: absolute;
10 top: 50%;
11 left: 50%;
12 transform: translate(-50%, -50%);
13 width: 200px;
14 height: 100px;
15 }
16 .eye {
17 position: relative;
18 display: inline-block;
19 width: 50px;
20 height: 50px;
21 }
22 .eyelid {
23 position: absolute;
24 top: 0;
25 left: 0;
26 width: 100%;
27 height: 100%;
28 background-color: white;
29 border-radius: 50%;
30 transform-origin: top center;
31 }
32 .tear {
33 position: absolute;
34 bottom: -10px;
35 left: 50%;
36 transform: translateX(-50%);
37 width: 2px;
38 height: 10px;
39 background-color: white;
40 border-radius: 2px;
41 }
42 </style>
43</head>
44<body>
45 <div class="eyes">
46 <div class="eye">
47 <div class="eyelid" style="animation: eyelid 2s infinite"></div>
48 </div>
49 <div class="eye" style="margin-left: 100px;">
50 <div class="eyelid" style="animation: eyelid 2s infinite"></div>
51 </div>
52 </div>
53
54 <script>
55 function animateEyes() {
56 let eyelids = document.querySelectorAll('.eyelid');
57 let tears = [];
58
59 eyelids.forEach((eyelid, index) => {
60 let tear = document.createElement('div');
61 tear.classList.add('tear');
62 eyelid.parentNode.appendChild(tear);
63 tears.push(tear);
64
65 eyelid.style.animationDelay = `${index * 0.1}s`;
66 });
67
68 let tearAnimation = [
69 { transform: 'translateY(0)' },
70 { transform: 'translateY(10px)' }
71 ];
72
73 let tearTiming = {
74 duration: 1,
75 easing: 'ease-out',
76 fill: 'forwards'
77 };
78
79 tears.forEach((tear, index) => {
80 tear.animate(tearAnimation, {
81 ...tearTiming,
82 delay: `${index * 0.1}s`
83 });
84 });
85
86 let eyelidAnimation = [
87 { transform: 'translateY(0) rotate(0deg)' },
88 { transform: 'translateY(-10px) rotate(-10deg)' },
89 { transform: 'translateY(-20px) rotate(-20deg)' },
90 { transform: 'translateY(-30px) rotate(-30deg)' },
91 { transform: 'translateY(-40px) rotate(-40deg)' },
92 { transform: 'translateY(-50px) rotate(-50deg)' },
93 { transform: 'translateY(-60px) rotate(-60deg)' },
94 { transform: 'translateY(-70px) rotate(-70deg)' },
95 { transform: 'translateY(-80px) rotate(-80deg)' },
96 { transform: 'translateY(-90px) rotate(-90deg)' },
97 { transform: 'translateY(-100px) rotate(-100deg)' },
98 { transform: 'translateY(-110px) rotate(-110deg)' },
99 { transform: 'translateY(-120px) rotate(-120deg)' },
100 { transform: 'translateY(-130px) rotate(-130deg)' },
101 { transform: 'translateY(-140px) rotate(-140deg)' },
102 { transform: 'translateY(-150px) rotate(-150deg)' },
103 { transform: 'translateY(-160px) rotate(-160deg)' },
104 { transform: 'translateY(-170px) rotate(-170deg)' },
105 { transform: 'translateY(-180px) rotate(-180deg)' },
106 { transform: 'translateY(-190px) rotate(-190deg)' },
107 { transform: 'translateY(-200px) rotate(-200deg)' },
108 { transform: 'translateY(-210px) rotate(-210deg)' },
109 { transform: 'translateY(-220px) rotate(-220deg)' },
110 { transform: 'translateY(-230px) rotate(-230deg)' },
111 { transform: 'translateY(-240px) rotate(-240deg)' },
112 { transform: 'translateY(-250px) rotate(-250deg)' },
113 { transform: 'translateY(-260px) rotate(-260deg)' },
114 { transform: 'translateY(-270px) rotate(-270deg)' },
115 { transform: 'translateY(-280px) rotate(-280deg)' },
116 { transform: 'translateY(-290px) rotate(-290deg)' },
117 { transform: 'translateY(-300px) rotate(-300deg)' },
118 { transform: 'translateY(-310px) rotate(-310deg)' },
119 { transform: 'translateY(-320px) rotate(-320deg)' },
120 { transform: 'translateY(-330px) rotate(-330deg)' },
121 { transform: 'translateY(-340px) rotate(-340deg)' },
122 { transform: 'translateY(-350px) rotate(-350deg)' },
123 { transform: 'translateY(-360px) rotate(-360deg)' },
124 ];
125
126 let timing = {
127 duration: 3,
128 easing: 'ease-out',
129 fill: 'forwards'
130 };
131
132 eyelids.forEach((eyelid, index) => {
133 eyelid.animate(eyelidAnimation, {
134 ...timing,
135 delay: `${index * 0.1}s`
136 });
137 });
138 }
139
140 animateEyes();
141 </script>
142</body>
143</html>