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