animation2code benchmark
For best compatibility, please view this dashboard in a Chrome browser.
← back to CSS3 loading animations

model output

Qwen3-VL-8B-Instruct

CSS3 loading animations

A 0.66T 0.24
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>Rotating Circle Animation</title>
7<style>
8  body {
9    margin: 0;
10    padding: 0;
11    background-color: black;
12    display: flex;
13    justify-content: center;
14    align-items: center;
15    height: 100vh;
16  }
17  .circle {
18    width: 50px;
19    height: 50px;
20    border: 2px solid #00ff99;
21    border-radius: 50%;
22    position: relative;
23    animation: rotate 2s linear infinite;
24  }
25  .circle::before {
26    content: "";
27    position: absolute;
28    top: 50%;
29    left: 50%;
30    transform: translate(-50%, -50%);
31    width: 20px;
32    height: 20px;
33    background-color: #00ff99;
34    border-radius: 50%;
35    animation: pulse 1.5s ease-in-out infinite alternate;
36  }
37  @keyframes rotate {
38    0% { transform: rotate(0deg); }
39    100% { transform: rotate(360deg); }
40  }
41  @keyframes pulse {
42    0% { transform: scale(1); }
43    100% { transform: scale(1.2); }
44  }
45</style>
46</head>
47<body>
48  <div class="circle"></div>
49</body>
50</html>