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

model output

LLaMA 4 Scout

CSS3 loading animations

A 0.54T 0.31
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>Loading Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            display: flex;
11            justify-content: center;
12            align-items: center;
13            height: 100vh;
14            margin: 0;
15        }
16        .dot {
17            width: 10px;
18            height: 10px;
19            border-radius: 50%;
20            background-color: #00ff00;
21            display: inline-block;
22            animation: pulse 1.5s infinite;
23        }
24        .dot:nth-child(1) {
25            animation-delay: 0s;
26        }
27        .dot:nth-child(2) {
28            animation-delay: 0.2s;
29        }
30        .dot:nth-child(3) {
31            animation-delay: 0.4s;
32        }
33        .dot:nth-child(4) {
34            animation-delay: 0.6s;
35        }
36        .dot:nth-child(5) {
37            animation-delay: 0.8s;
38        }
39        @keyframes pulse {
40            0% {
41                transform: scale(1);
42            }
43            50% {
44                transform: scale(1.2);
45            }
46            100% {
47                transform: scale(1);
48            }
49        }
50    </style>
51</head>
52<body>
53    <span class="dot"></span>
54    <span class="dot"></span>
55    <span class="dot"></span>
56    <span class="dot"></span>
57    <span class="dot"></span>
58</body>
59</html>