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

model output

Qwen3-VL-8B-Instruct

CSS Waves

A 0.73T 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>Wavy Animation</title>
7<style>
8  body {
9    background-color: #333;
10    display: flex;
11    justify-content: center;
12    align-items: center;
13    height: 100vh;
14    margin: 0;
15  }
16  .container {
17    width: 300px;
18    height: 300px;
19    background: linear-gradient(to bottom, #ffffff, #f0f8ff);
20    border: 2px solid #e0e0e0;
21    position: relative;
22    overflow: hidden;
23  }
24  .wave {
25    position: absolute;
26    bottom: 0;
27    width: 100%;
28    height: 50px;
29    background: linear-gradient(to bottom, rgba(173, 216, 230, 0.5), rgba(173, 216, 230, 0.8));
30    border-radius: 50px;
31    animation: wave 2s ease-in-out infinite;
32  }
33  @keyframes wave {
34    0% {
35      transform: translateX(0) scaleY(1);
36    }
37    50% {
38      transform: translateX(0) scaleY(1.2);
39    }
40    100% {
41      transform: translateX(0) scaleY(1);
42    }
43  }
44</style>
45</head>
46<body>
47  <div class="container">
48    <div class="wave"></div>
49  </div>
50</body>
51</html>