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