animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to CSS animated waves

model output

LLaMA 4 Scout

CSS animated waves

A 0.64T 0.27
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>Ocean Waves</title>
7    <style>
8        body {
9            margin: 0;
10            overflow: hidden;
11            background: linear-gradient(to bottom, #ADD8E6 50%, #032B44 100%);
12        }
13        .wave {
14            position: absolute;
15            bottom: 0;
16            left: 0;
17            width: 100%;
18            height: 150px;
19            background: #4682B4;
20            border-radius: 50px 50px 0 0;
21            animation: wave 5s linear infinite;
22        }
23        @keyframes wave {
24            0% {
25                transform: translateX(0);
26            }
27            100% {
28                transform: translateX(-100%);
29            }
30        }
31    </style>
32</head>
33<body>
34    <div class="wave"></div>
35</body>
36</html>