animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Porco Rosso "SAVOIA" (紅の豚)

model output

LLaMA 4 Scout

Only CSS: Porco Rosso "SAVOIA" (紅の豚)

A 0.50T 0.49
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>Plane Animation</title>
7    <style>
8        body {
9            background-color: #000;
10            margin: 0;
11            overflow: hidden;
12        }
13        #plane {
14            position: absolute;
15            top: 50%;
16            left: 50%;
17            transform: translate(-50%, -50%);
18            width: 200px;
19            height: 200px;
20            background-color: #f00;
21        }
22        #propeller {
23            position: absolute;
24            top: 40%;
25            left: 45%;
26            transform: translate(-50%, -50%) rotate(0deg);
27            width: 50px;
28            height: 50px;
29            background-color: #0f0;
30            border-radius: 50%;
31            animation: spin 2s linear infinite;
32        }
33        #tail {
34            position: absolute;
35            top: 55%;
36            left: 60%;
37            transform: translate(-50%, -50%);
38            width: 20px;
39            height: 20px;
40            background-image: linear-gradient(to bottom, #ff0000, #ffffff, #0000ff, #008000);
41        }
42        @keyframes spin {
43            0% {
44                transform: translate(-50%, -50%) rotate(0deg);
45            }
46            100% {
47                transform: translate(-50%, -50%) rotate(360deg);
48            }
49        }
50        @keyframes fly {
51            0% {
52                transform: translate(-50%, -50%) rotate(0deg) translateX(0);
53            }
54            100% {
55                transform: translate(-50%, -50%) rotate(360deg) translateX(500px);
56            }
57        }
58    </style>
59</head>
60<body>
61    <div id="plane"></div>
62    <div id="propeller"></div>
63    <div id="tail"></div>
64    <script>
65        const plane = document.getElementById('plane');
66        const propeller = document.getElementById('propeller');
67        const tail = document.getElementById('tail');
68        plane.style.animation = 'fly 10s linear infinite';
69        propeller.style.animation = 'spin 2s linear infinite';
70    </script>
71</body>
72</html>