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

model output

Qwen3-VL-8B-Instruct

Only CSS: Joint Animation

A 0.75T 0.28
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 rotate {
9    0% {
10      transform: rotate(0deg);
11    }
12    100% {
13      transform: rotate(90deg);
14    }
15  }
16
17  .box {
18    width: 100px;
19    height: 30px;
20    background-color: #3498db;
21    position: absolute;
22    top: 50%;
23    left: 50%;
24    transform: translate(-50%, -50%) rotate(0deg);
25    animation: rotate 0.4s ease-in-out forwards;
26  }
27
28  .dot {
29    width: 10px;
30    height: 10px;
31    background-color: yellow;
32    border-radius: 50%;
33    position: absolute;
34    top: 50%;
35    left: 50%;
36    transform: translate(-50%, -50%);
37  }
38</style>
39</head>
40<body>
41  <div class="box">
42    <div class="dot"></div>
43  </div>
44</body>
45</html>