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.61T 0.27
compare with ground truth →
1<!DOCTYPE html>
2<html>
3<head>
4    <style>
5        /* Add your CSS styles here */
6        body {
7            background-color: black;
8        }
9        #red-circle {
10            position: absolute;
11            top: 50%;
12            left: 50%;
13            transform: translate(-50%, -50%);
14            width: 20px;
15            height: 20px;
16            border-radius: 50%;
17            background-color: red;
18            animation: pulse 1s infinite;
19        }
20        
21        @keyframes pulse {
22            0% {
23                transform: translate(-50%, -50%) scale(1);
24            }
25            50% {
26                transform: translate(-50%, -50%) scale(1.2);
27            }
28            100% {
29                transform: translate(-50%, -50%) scale(1);
30            }
31        }
32    </style>
33</head>
34<body>
35    <div id="red-circle"></div>
36    <script>
37        // Add your JavaScript code here
38    </script>
39</body>
40</html>