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

model output

LLaMA 4 Scout

Only CSS: 3D Scan

A 0.53T 0.27
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>Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            perspective: 600px;
11        }
12        .cube {
13            position: relative;
14            width: 200px;
15            height: 200px;
16            transform-style: preserve-3d;
17            transform: rotateX(0deg) rotateY(0deg);
18        }
19        .wireframe {
20            position: absolute;
21            width: 100%;
22            height: 100%;
23            box-shadow: 0 0 0 1px #fff;
24            border: 1px solid transparent;
25        }
26        .circle {
27            position: absolute;
28            top: 50%;
29            left: 50%;
30            transform: translate(-50%, -50%);
31            width: 150px;
32            height: 150px;
33            border-radius: 50%;
34            box-shadow: 0 0 0 1px #03A9F4;
35            animation: pulse 2s linear infinite;
36        }
37        .circle-inner {
38            position: absolute;
39            top: 50%;
40            left: 50%;
41            transform: translate(-50%, -50%);
42            width: 120px;
43            height: 120px;
44            border-radius: 50%;
45            box-shadow: 0 0 0 1px #8BC34A;
46            animation: pulse-inner 2s linear infinite;
47        }
48        @keyframes pulse {
49            0% {
50                width: 150px;
51                height: 150px;
52                opacity: 1;
53            }
54            50% {
55                width: 160px;
56                height: 160px;
57                opacity: 0.8;
58            }
59            100% {
60                width: 150px;
61                height: 150px;
62                opacity: 1;
63            }
64        }
65        @keyframes pulse-inner {
66            0% {
67                width: 120px;
68                height: 120px;
69                opacity: 1;
70            }
71            50% {
72                width: 130px;
73                height: 130px;
74                opacity: 0.8;
75            }
76            100% {
77                width: 120px;
78                height: 120px;
79                opacity: 1;
80            }
81        }
82        @keyframes rotate {
83            0% {
84                transform: rotateX(0deg) rotateY(0deg);
85            }
86            100% {
87                transform: rotateX(360deg) rotateY(360deg);
88            }
89        }
90    </style>
91</head>
92<body>
93    <div class="cube" style="animation: rotate 10s linear infinite;">
94        <div class="wireframe"></div>
95        <div class="circle" style="animation-delay: 0.5s;"></div>
96        <div class="circle-inner"></div>
97    </div>
98</body>
99</html>