← back to Only CSS: Joint Animationcompare with ground truth →
model output
Qwen3-VL-8B-Instruct
Only CSS: Joint Animation
A 0.75T 0.28
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>