model output
Claude Sonnet 4.6

Only CSS: Joint Animation
A 0.83T 0.22
1Looking at the animation, I can see two pill/bar shapes - a gray one and a blue one - connected at a pivot point. The gray bar rotates around the pivot point while the blue bar stays relatively horizontal. It appears to be a toggle/switch animation where the gray bar rotates from horizontal (0°) through vertical (-90°) and back, creating a folding/unfolding motion. The pivot point is where they connect.
2
3Let me analyze more carefully:
4- Frame 1: Both bars horizontal, gray on left, blue on right (like a straight line toggle)
5- Frame 2: Gray bar rotated ~-30° (going up-left), blue bar horizontal on right
6- Frame 3: Gray bar rotated ~-90° (vertical, going up), blue bar horizontal going right
7- Frame 4: Similar to frame 3 but slightly different position
8- Frame 5: Similar L-shape
9- Frame 6: Gray bar rotated back to ~-30°, returning to horizontal
10
11This is a looping animation of the gray bar rotating from 0° to -90° and back.
12
13<!DOCTYPE html>
14<html>
15<head>
16<style>
17  body { margin: 0; background: white; display: flex; justify-content: center; align-items: center; height: 100vh; }
18  
19  .scene {
20    position: relative;
21    width: 300px;
22    height: 300px;
23  }
24  
25  .pivot {
26    position: absolute;
27    left: 150px;
28    top: 150px;
29    width: 0;
30    height: 0;
31  }
32  
33  .gray-bar {
34    position: absolute;
35    width: 160px;
36    height: 44px;
37    background: #9e9e9e;
38    border-radius: 22px;
39    top: -22px;
40    right: 0px;
41    transform-origin: right center;
42    animation: grayRotate 2s ease-in-out infinite alternate;
43  }
44  
45  .blue-bar {
46    position: absolute;
47    width: 160px;
48    height: 44px;
49    background: #5aabcc;
50    border-radius: 22px;
51    top: -22px;
52    left: 0px;
53    transform-origin: left center;
54  }
55
56  @keyframes grayRotate {
57    0% {
58      transform: rotate(0deg);
59    }
60    100% {
61      transform: rotate(-90deg);
62    }
63  }
64</style>
65</head>
66<body>
67<div class="scene">
68  <div class="pivot">
69    <div class="gray-bar"></div>
70    <div class="blue-bar"></div>
71  </div>
72</div>
73</body>
74</html>