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.65T 0.21
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        .container {
9            position: relative;
10            width: 100vw;
11            height: 100vh;
12            background-color: #000;
13            display: flex;
14            justify-content: center;
15            align-items: center;
16        }
17        .box {
18            position: absolute;
19            width: 20px;
20            height: 20px;
21            border-radius: 50%;
22        }
23        .box:nth-child(1) {
24            top: 50px;
25            left: 50px;
26            background-color: #3498db;
27            animation: move 2s infinite;
28        }
29        .box:nth-child(2) {
30            top: 50px;
31            left: 70px;
32            background-color: #e74c3c;
33            animation: move 2s infinite 0.2s;
34        }
35        .box:nth-child(3) {
36            top: 50px;
37            left: 90px;
38            background-color: #3498db;
39            animation: move 2s infinite 0.4s;
40        }
41        .box:nth-child(4) {
42            top: 70px;
43            left: 50px;
44            background-color: #e74c3c;
45            animation: move 2s infinite 0.6s;
46        }
47        .box:nth-child(5) {
48            top: 70px;
49            left: 70px;
50            background-color: #fff;
51        }
52        .box:nth-child(6) {
53            top: 70px;
54            left: 90px;
55            background-color: #e74c3c;
56            animation: move 2s infinite 0.8s;
57        }
58        .box:nth-child(7) {
59            top: 90px;
60            left: 50px;
61            background-color: #3498db;
62            animation: move 2s infinite 1s;
63        }
64        .box:nth-child(8) {
65            top: 90px;
66            left: 70px;
67            background-color: #e74c3c;
68            animation: move 2s infinite 1.2s;
69        }
70        .box:nth-child(9) {
71            top: 90px;
72            left: 90px;
73            background-color: #3498db;
74            animation: move 2s infinite 1.4s;
75        }
76        @keyframes move {
77            0% {
78                transform: scale(1);
79            }
80            50% {
81                transform: scale(1.2);
82            }
83            100% {
84                transform: scale(1);
85            }
86        }
87    </style>
88</head>
89<body>
90    <div class="container">
91        <div class="box"></div>
92        <div class="box"></div>
93        <div class="box"></div>
94        <div class="box"></div>
95        <div class="box"></div>
96        <div class="box"></div>
97        <div class="box"></div>
98        <div class="box"></div>
99        <div class="box"></div>
100    </div>
101</body>
102</html>