model output
Qwen3-VL-8B-Instruct

Only CSS: Joint Animation
A 0.80T 0.33
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 rotateAndExtend {
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  .container {
21    width: 100vw;
22    height: 100vh;
23    display: flex;
24    justify-content: center;
25    align-items: center;
26    background-color: white;
27  }
28
29  .bar {
30    width: 100px;
31    height: 20px;
32    background-color: #3498db;
33    position: relative;
34    animation: rotateAndExtend 2s ease-in-out forwards;
35  }
36
37  .dot {
38    width: 10px;
39    height: 10px;
40    border-radius: 50%;
41    position: absolute;
42    top: 5px;
43    left: 5px;
44    animation: dotAnimation 2s ease-in-out forwards;
45  }
46
47  .dot:nth-child(1) {
48    background-color: #3498db;
49    animation-delay: 0.2s;
50  }
51
52  .dot:nth-child(2) {
53    background-color: #f1c40f;
54    animation-delay: 0.4s;
55  }
56
57  .dot:nth-child(3) {
58    background-color: #f1c40f;
59    animation-delay: 0.6s;
60  }
61
62  @keyframes dotAnimation {
63    0% {
64      transform: translateX(0) translateY(0);
65    }
66    50% {
67      transform: translateX(10px) translateY(5px);
68    }
69    100% {
70      transform: translateX(0) translateY(0);
71    }
72  }
73</style>
74</head>
75<body>
76  <div class="container">
77    <div class="bar">
78      <div class="dot"></div>
79      <div class="dot"></div>
80      <div class="dot"></div>
81    </div>
82  </div>
83</body>
84</html>