animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to Only CSS: Milk

model output

Qwen3-VL-8B-Instruct

Only CSS: Milk

A 0.64T 0.26
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 Transition</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    overflow: hidden;
12    background-color: black;
13    width: 100vw;
14    height: 100vh;
15  }
16  .wave {
17    position: absolute;
18    bottom: 0;
19    left: 0;
20    width: 100%;
21    height: 100px;
22    background: linear-gradient(to bottom, white 0%, white 100%);
23    border-radius: 50% 50% 0 0;
24    animation: wave 4s ease-in-out infinite;
25  }
26  @keyframes wave {
27    0% {
28      transform: scaleY(1);
29    }
30    50% {
31      transform: scaleY(1.2);
32    }
33    100% {
34      transform: scaleY(1);
35    }
36  }
37</style>
38</head>
39<body>
40  <div class="wave"></div>
41</body>
42</html>