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

model output

Qwen3-VL-8B-Instruct

CSS animated waves

A 0.76T 0.12
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>Wavy Blue Animation</title>
7<style>
8  body {
9    margin: 0;
10    overflow: hidden;
11    background: linear-gradient(to bottom, #add8e6, #0057b8);
12    width: 100vw;
13    height: 100vh;
14    display: flex;
15    justify-content: center;
16    align-items: center;
17  }
18  .wave {
19    position: absolute;
20    bottom: 0;
21    width: 100%;
22    height: 100px;
23    background: linear-gradient(to bottom, #0057b8, #003366);
24    border-radius: 50% 50% 0 0;
25    animation: wave 3s ease-in-out infinite;
26  }
27  @keyframes wave {
28    0%, 100% {
29      transform: translateX(0) scaleY(1);
30    }
31    50% {
32      transform: translateX(0) scaleY(1.2);
33    }
34  }
35</style>
36</head>
37<body>
38  <div class="wave"></div>
39</body>
40</html>