model output
Qwen3-VL-8B-Instruct

Only CSS: Joint Animation
A 0.44T 0.24
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>Arrow Animation</title>
7<style>
8  @keyframes rotateArrow {
9    0% {
10      transform: rotate(0deg);
11    }
12    100% {
13      transform: rotate(180deg);
14    }
15  }
16
17  .arrow {
18    position: absolute;
19    top: 50%;
20    left: 50%;
21    transform: translate(-50%, -50%);
22    width: 100px;
23    height: 100px;
24    background: linear-gradient(to right, #888, #444);
25    border-radius: 10px;
26    animation: rotateArrow 1s ease-in-out forwards;
27  }
28
29  .arrow::before {
30    content: '';
31    position: absolute;
32    top: 0;
33    left: 0;
34    width: 100%;
35    height: 100%;
36    background: linear-gradient(to right, #888, #444);
37    border-radius: 10px;
38    transform: rotate(90deg);
39    animation: rotateArrow 1s ease-in-out forwards;
40  }
41
42  .arrow::after {
43    content: '';
44    position: absolute;
45    top: 0;
46    left: 0;
47    width: 100%;
48    height: 100%;
49    background: linear-gradient(to right, #888, #444);
50    border-radius: 10px;
51    transform: rotate(180deg);
52    animation: rotateArrow 1s ease-in-out forwards;
53  }
54</style>
55</head>
56<body>
57  <div class="arrow"></div>
58</body>
59</html>