model output
Claude Sonnet 4.6

Only CSS: Joint Animation
A 0.85T 0.34
1Looking at the frames, I can see a blue rectangle with a yellow dot near its left edge. The rectangle rotates around the yellow dot (pivot point at the left side), going from 0° → ~-45° → ~-90° → ~-80° → ~-45° (oscillating/swinging animation). The pivot point appears to be at the left side of the rectangle.
2
3Let me analyze more carefully:
4- Frame 1: 0° (horizontal)
5- Frame 2: ~-30° to -40° (rotating clockwise downward)
6- Frame 3: ~-80° to -90° (nearly vertical)
7- Frame 4: ~-85° (slightly past vertical, bouncing back)
8- Frame 5: ~-80° (coming back)
9- Frame 6: ~-30° to -40° (swinging back)
10
11The rectangle rotates around its left-center point (where the yellow dot is). It swings down and back like a pendulum.
12
13<!DOCTYPE html>
14<html>
15<head>
16<style>
17  * { margin: 0; padding: 0; box-sizing: border-box; }
18  body {
19    width: 1024px;
20    height: 768px;
21    background: white;
22    overflow: hidden;
23  }
24  
25  .pivot {
26    position: absolute;
27    left: 400px;
28    top: 383px;
29    width: 0;
30    height: 0;
31    animation: swing 2s ease-in-out infinite;
32    transform-origin: 0 0;
33  }
34  
35  .rectangle {
36    position: absolute;
37    left: 0px;
38    top: -35px;
39    width: 295px;
40    height: 70px;
41    background: #4BADD4;
42    border-radius: 2px;
43  }
44  
45  .dot {
46    position: absolute;
47    left: 28px;
48    top: 50%;
49    transform: translate(-50%, -50%);
50    width: 14px;
51    height: 14px;
52    background: #FFC107;
53    border-radius: 50%;
54    border: 2px solid #FF9800;
55  }
56  
57  @keyframes swing {
58    0% {
59      transform: rotate(0deg);
60    }
61    40% {
62      transform: rotate(90deg);
63    }
64    55% {
65      transform: rotate(95deg);
66    }
67    70% {
68      transform: rotate(88deg);
69    }
70    80% {
71      transform: rotate(92deg);
72    }
73    90% {
74      transform: rotate(90deg);
75    }
76    100% {
77      transform: rotate(90deg);
78    }
79  }
80</style>
81</head>
82<body>
83
84<div class="pivot">
85  <div class="rectangle">
86    <div class="dot"></div>
87  </div>
88</div>
89
90</body>
91</html>