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

model output

Qwen3-VL-8B-Instruct

flat loading animate

A 0.69T 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>Animation</title>
7<style>
8  @keyframes pulse {
9    0%, 100% { transform: scale(1); }
10    50% { transform: scale(1.1); }
11  }
12  
13  @keyframes colorChange {
14    0% { background: #ffaa55; }
15    25% { background: #00a896; }
16    50% { background: #ff5555; }
17    75% { background: #00a896; }
18    100% { background: #ffaa55; }
19  }
20  
21  .circle {
22    width: 50px;
23    height: 50px;
24    border-radius: 50%;
25    background: #ffaa55;
26    position: absolute;
27    top: 50%;
28    left: 50%;
29    transform: translate(-50%, -50%);
30    animation: pulse 1s ease-in-out, colorChange 4s ease-in-out 0s infinite alternate;
31  }
32</style>
33</head>
34<body>
35  <div class="circle"></div>
36</body>
37</html>