animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Cry Baby

model output

Qwen3-VL-8B-Instruct

Only CSS: Cry Baby

A 0.62T 0.23
compare with ground truth →
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>Animated Eyes</title>
7    <style>
8        body {
9            background-color: black;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .eyes-container {
17            position: relative;
18            width: 200px;
19            height: 100px;
20        }
21        .eye {
22            position: absolute;
23            width: 60px;
24            height: 30px;
25            background-color: white;
26            border-radius: 50% 50% 50% 50% / 50% 50% 50% 50%;
27            top: 35px;
28            left: 50px;
29            transform-origin: center;
30            animation: blink 3s ease-in-out infinite;
31        }
32        .left-eye {
33            left: 50px;
34        }
35        .right-eye {
36            left: 150px;
37        }
38        .tear {
39            position: absolute;
40            width: 10px;
41            height: 20px;
42            background-color: white;
43            border-radius: 50%;
44            bottom: 50px;
45            left: 50px;
46            transform-origin: center;
47            animation: tear 3s ease-in-out infinite;
48        }
49        .left-tear {
50            left: 50px;
51        }
52        .right-tear {
53            left: 150px;
54        }
55        @keyframes blink {
56            0%, 100% {
57                transform: scaleY(1);
58            }
59            50% {
60                transform: scaleY(0.5);
61            }
62        }
63        @keyframes tear {
64            0%, 100% {
65                transform: scaleY(0);
66                opacity: 0;
67            }
68            25% {
69                transform: scaleY(1);
70                opacity: 1;
71            }
72            50% {
73                transform: scaleY(0);
74                opacity: 0;
75            }
76            75% {
77                transform: scaleY(1);
78                opacity: 1;
79            }
80        }
81    </style>
82</head>
83<body>
84    <div class="eyes-container">
85        <div class="eye left-eye"></div>
86        <div class="eye right-eye"></div>
87        <div class="tear left-tear"></div>
88        <div class="tear right-tear"></div>
89    </div>
90</body>
91</html>