animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to flat loading animate

model output

LLaMA 4 Scout

flat loading animate

A 0.85T 0.35
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        .ball {
9            position: absolute;
10            top: 50%;
11            transform: translateY(-50%);
12            border-radius: 50%;
13            width: 20px;
14            height: 20px;
15        }
16        #red {
17            background-color: red;
18            left: 50%;
19            animation: red-move 4s infinite;
20        }
21        #blue {
22            background-color: blue;
23            left: 50%;
24            animation: blue-move 4s infinite;
25        }
26        @keyframes red-move {
27            0% {
28                transform: translateX(-20px) translateY(-50%);
29            }
30            50% {
31                transform: translateX(20px) translateY(-50%);
32            }
33            100% {
34                transform: translateX(-20px) translateY(-50%);
35            }
36        }
37        @keyframes blue-move {
38            0% {
39                transform: translateX(20px) translateY(-50%);
40            }
41            50% {
42                transform: translateX(-20px) translateY(-50%);
43            }
44            100% {
45                transform: translateX(20px) translateY(-50%);
46            }
47        }
48    </style>
49</head>
50<body>
51    <div class="ball" id="red"></div>
52    <div class="ball" id="blue"></div>
53</body>
54</html>