animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Truck a GO, GO! GOOOO!!

model output

LLaMA 4 Scout

Only CSS: Truck a GO, GO! GOOOO!!

A 0.51T 0.22
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        .car {
9            position: absolute;
10            width: 100px;
11            height: 50px;
12            background-color: #964B00;
13            border-radius: 10px;
14            transform-style: preserve-3d;
15        }
16        .car .body {
17            position: absolute;
18            width: 100%;
19            height: 100%;
20            background-color: #964B00;
21        }
22        .car .window {
23            position: absolute;
24            width: 40%;
25            height: 40%;
26            top: 20%;
27            left: 30%;
28            background-color: #ADD8E6;
29        }
30        .car .wheel {
31            position: absolute;
32            width: 10px;
33            height: 10px;
34            border-radius: 50%;
35            background-color: black;
36        }
37        .car .wheel:nth-child(1) {
38            top: 40px;
39            left: 20px;
40        }
41        .car .wheel:nth-child(2) {
42            top: 40px;
43            right: 20px;
44        }
45        .car .wheel:nth-child(3) {
46            top: 60px;
47            left: 20px;
48        }
49        .car .wheel:nth-child(4) {
50            top: 60px;
51            right: 20px;
52        }
53
54        @keyframes move {
55            0% {
56                transform: translate(0, 0) rotate(0deg);
57            }
58            10% {
59                transform: translate(100px, 0) rotate(10deg);
60            }
61            20% {
62                transform: translate(200px, 0) rotate(20deg);
63            }
64            30% {
65                transform: translate(300px, 0) rotate(30deg);
66            }
67            40% {
68                transform: translate(400px, 0) rotate(40deg);
69            }
70            50% {
71                transform: translate(500px, 0) rotate(50deg);
72            }
73            60% {
74                transform: translate(600px, 0) rotate(60deg);
75            }
76            70% {
77                transform: translate(700px, 0) rotate(70deg);
78            }
79            80% {
80                transform: translate(800px, 0) rotate(80deg);
81            }
82            90% {
83                transform: translate(900px, 0) rotate(90deg);
84            }
85            100% {
86                transform: translate(1000px, 0) rotate(100deg);
87            }
88        }
89
90        .animate {
91            animation: move 10s linear infinite;
92        }
93    </style>
94</head>
95<body>
96    <div class="car animate">
97        <div class="body"></div>
98        <div class="window"></div>
99        <div class="wheel"></div>
100        <div class="wheel"></div>
101        <div class="wheel"></div>
102        <div class="wheel"></div>
103    </div>
104</body>
105</html>