model output
Gemini 3 Flash Preview

Only CSS: Joint Animation
A 0.88T 0.44
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>Swinging Tag Animation</title>
7    <style>
8        :root {
9            --blue: #3fa9f5;
10            --yellow: #f1c40f;
11            --dashed-color: #999;
12            --tag-width: 200px;
13            --tag-height: 55px;
14            --eyelet-pos: 35px; /* Distance from left edge to center of eyelet */
15        }
16
17        body {
18            margin: 0;
19            padding: 0;
20            display: flex;
21            justify-content: center;
22            align-items: center;
23            height: 100vh;
24            background-color: #ffffff;
25            overflow: hidden;
26        }
27
28        .container {
29            position: relative;
30            width: var(--tag-width);
31            height: var(--tag-height);
32        }
33
34        /* The dashed placeholder representing the starting position */
35        .ghost {
36            position: absolute;
37            top: 0;
38            left: 0;
39            width: 100%;
40            height: 100%;
41            border: 1px dashed var(--dashed-color);
42            box-sizing: border-box;
43            border-radius: 2px;
44            opacity: 0.8;
45        }
46
47        /* The moving blue rectangle */
48        .tag {
49            position: absolute;
50            top: 0;
51            left: 0;
52            width: 100%;
53            height: 100%;
54            background-color: var(--blue);
55            border-radius: 2px;
56            
57            /* The pivot point is the center of the eyelet */
58            transform-origin: var(--eyelet-pos) calc(var(--tag-height) / 2);
59            
60            /* Initial tilt seen in the first frame */
61            transform: rotate(5deg);
62            
63            /* Animation properties */
64            animation: swing 2.5s ease-in-out infinite;
65            
66            display: flex;
67            align-items: center;
68        }
69
70        /* The eyelet (hole) in the tag */
71        .eyelet {
72            position: absolute;
73            left: calc(var(--eyelet-pos) - 10px);
74            width: 16px;
75            height: 16px;
76            background-color: var(--yellow);
77            border: 2px solid white;
78            border-radius: 50%;
79            box-shadow: 0 0 0 1px rgba(0,0,0,0.1);
80        }
81
82        @keyframes swing {
83            0% {
84                transform: rotate(5deg);
85            }
86            /* Swings down to vertical */
87            40% {
88                transform: rotate(90deg);
89            }
90            /* Holds at the bottom briefly */
91            60% {
92                transform: rotate(90deg);
93            }
94            /* Returns to start */
95            100% {
96                transform: rotate(5deg);
97            }
98        }
99    </style>
100</head>
101<body>
102
103    <div class="container">
104        <!-- The static dashed outline -->
105        <div class="ghost"></div>
106        
107        <!-- The animated blue bar -->
108        <div class="tag">
109            <!-- The yellow circle near the pivot -->
110            <div class="eyelet"></div>
111        </div>
112    </div>
113
114</body>
115</html>