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

model output

Qwen3-VL-8B-Instruct

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

A 0.43T 0.23
compare with ground truth →
1<!DOCTYPE html>
2<html lang="en">
3<head>
4    <meta charset="UTF-8">
5    <title>Rotating Truck Animation</title>
6    <style>
7        body {
8            margin: 0;
9            display: flex;
10            justify-content: center;
11            align-items: center;
12            height: 100vh;
13            background: white;
14            overflow: hidden;
15        }
16        .truck {
17            width: 100px;
18            height: 60px;
19            position: relative;
20            animation: rotate 4s infinite ease-in-out;
21        }
22        .truck:before {
23            content: '';
24            position: absolute;
25            top: 0;
26            left: 0;
27            width: 100%;
28            height: 100%;
29            background: #d4c7b4;
30            border-radius: 5px;
31            box-shadow: 0 5px 10px rgba(0,0,0,0.2);
32        }
33        .truck .window {
34            position: absolute;
35            top: 10px;
36            right: 10px;
37            width: 30px;
38            height: 20px;
39            background: #87ceeb;
40            border-radius: 3px;
41        }
42        .truck .wheel {
43            position: absolute;
44            width: 15px;
45            height: 15px;
46            background: #333;
47            border-radius: 50%;
48            bottom: 10px;
49        }
50        .truck .wheel:nth-child(1) {
51            left: 20px;
52        }
53        .truck .wheel:nth-child(2) {
54            left: 60px;
55        }
56        .truck .wheel:nth-child(3) {
57            left: 20px;
58            transform: rotate(180deg);
59        }
60        .truck .wheel:nth-child(4) {
61            left: 60px;
62            transform: rotate(180deg);
63        }
64        @keyframes rotate {
65            0% {
66                transform: rotateY(0deg) translateZ(0);
67            }
68            25% {
69                transform: rotateY(180deg) translateZ(0);
70            }
71            50% {
72                transform: rotateY(360deg) translateZ(0);
73            }
74            75% {
75                transform: rotateY(540deg) translateZ(0);
76            }
77            100% {
78                transform: rotateY(720deg) translateZ(0);
79            }
80        }
81    </style>
82</head>
83<body>
84    <div class="truck">
85        <div class="window"></div>
86        <div class="wheel"></div>
87        <div class="wheel"></div>
88        <div class="wheel"></div>
89        <div class="wheel"></div>
90    </div>
91</body>
92</html>