model output
Gemini 3 Flash Preview

Only CSS: Joint Animation
A 0.81T 0.07
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>Mechanical Bar Animation</title>
7    <style>
8        /* Reset and layout */
9        body {
10            margin: 0;
11            padding: 0;
12            display: flex;
13            justify-content: center;
14            align-items: center;
15            height: 100vh;
16            background-color: #ffffff;
17            overflow: hidden;
18        }
19
20        /* Container for the bars */
21        .stage {
22            position: relative;
23            width: 400px;
24            height: 400px;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28        }
29
30        /* Shared properties for both pill shapes */
31        .bar {
32            height: 48px;
33            width: 190px;
34            border-radius: 24px;
35            position: absolute;
36            top: 50%;
37            margin-top: -24px; /* Center vertically */
38        }
39
40        /* The blue horizontal bar (fixed) */
41        .blue-bar {
42            background-color: #62aed3;
43            left: 50%;
44            /* Position the left cap center at the screen center */
45            margin-left: -24px; 
46            z-index: 2; /* Sits on top of the gray bar */
47        }
48
49        /* The gray rotating bar */
50        .gray-bar {
51            background-color: #9a9a9a;
52            left: 50%;
53            /* Position the right cap center at the screen center */
54            /* Width (190) - Radius (24) = 166 */
55            margin-left: -166px; 
56            
57            /* Pivot around the center of its right cap */
58            transform-origin: 166px 24px; 
59            
60            z-index: 1;
61            
62            /* Animation timing matches the provided video:
63               0.0 - 1.0s: Rotate to 90deg
64               1.0 - 1.5s: Hold at 90deg
65               1.5 - 2.5s: Return to 0deg
66            */
67            animation: swing 2.5s ease-in-out infinite;
68        }
69
70        @keyframes swing {
71            0% {
72                transform: rotate(0deg);
73            }
74            /* Reach vertical at 1.0s (40% of 2.5s) */
75            40% {
76                transform: rotate(90deg);
77            }
78            /* Hold until 1.5s (60% of 2.5s) */
79            60% {
80                transform: rotate(90deg);
81            }
82            /* Return to start at 2.5s */
83            100% {
84                transform: rotate(0deg);
85            }
86        }
87    </style>
88</head>
89<body>
90
91    <div class="stage">
92        <!-- Gray bar sits behind and rotates -->
93        <div class="gray-bar bar"></div>
94        <!-- Blue bar stays static on top -->
95        <div class="blue-bar bar"></div>
96    </div>
97
98</body>
99</html>