model output
Qwen3-VL-8B-Instruct

Only CSS: Joint Animation
A 0.54T 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>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    width: 100px;
19    height: 50px;
20    background: linear-gradient(to right, #1e88e5, #42a5f5);
21    border-radius: 50% 50% 50% 50% / 50% 50% 0% 0%;
22    position: relative;
23    animation: rotateArrow 0.8s ease-in-out forwards;
24  }
25
26  .arrow::before {
27    content: '';
28    position: absolute;
29    top: 0;
30    left: 0;
31    width: 100%;
32    height: 100%;
33    background: linear-gradient(to right, #1e88e5, #42a5f5);
34    border-radius: 50% 50% 50% 50% / 50% 50% 0% 0%;
35    transform: rotate(0deg);
36    animation: rotateArrow 0.8s ease-in-out forwards;
37  }
38
39  .arrow::after {
40    content: '';
41    position: absolute;
42    top: 0;
43    left: 0;
44    width: 100%;
45    height: 100%;
46    background: linear-gradient(to right, #1e88e5, #42a5f5);
47    border-radius: 50% 50% 50% 50% / 50% 50% 0% 0%;
48    transform: rotate(0deg);
49    animation: rotateArrow 0.8s ease-in-out forwards;
50  }
51</style>
52</head>
53<body>
54  <div class="arrow"></div>
55</body>
56</html>