animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to 4 'counter rotation' effects

model output

LLaMA 4 Scout

4 'counter rotation' effects

A 0.33T 0.30
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        .box {
9            width: 20px;
10            height: 20px;
11            display: inline-block;
12            margin: 2px;
13            border-radius: 2px;
14        }
15        .container {
16            position: relative;
17            top: 50px;
18            left: 50px;
19        }
20        .animation {
21            position: relative;
22            animation: move 2s infinite;
23        }
24        @keyframes move {
25            0% {
26                transform: translateY(0);
27            }
28            50% {
29                transform: translateY(-80px);
30            }
31            100% {
32                transform: translateY(0);
33            }
34        }
35        .color-1 {
36            background-color: #3498db;
37        }
38        .color-2 {
39            background-color: #e74c3c;
40        }
41        .color-3 {
42            background-color: #f1c40f;
43        }
44    </style>
45</head>
46<body>
47    <div class="container">
48        <div class="animation">
49            <div class="box color-1"></div>
50            <div class="box color-2"></div>
51            <div class="box color-1"></div>
52            <div class="box color-1"></div>
53            <div class="box color-2"></div>
54            <div class="box color-1"></div>
55            <div class="box color-3"></div>
56            <div class="box color-2"></div>
57            <div class="box color-1"></div>
58        </div>
59    </div>
60</body>
61</html>