model output
Gemini 3 Flash Preview

Only CSS: Joint Animation
A 0.93T 0.42
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>Rotating Rectangle Animation</title>
7    <style>
8        /* Reset and Body setup */
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 all elements */
21        .stage {
22            position: relative;
23            width: 300px;
24            height: 300px;
25            display: flex;
26            justify-content: center;
27            align-items: center;
28        }
29
30        /* The ghost/reference dashed box */
31        .ghost-box {
32            position: absolute;
33            width: 240px;
34            height: 70px;
35            border: 1px dashed #a0a0a0;
36            box-sizing: border-box;
37            z-index: 1;
38        }
39
40        /* The rotating blue rectangle */
41        .rotating-rect {
42            position: absolute;
43            width: 240px;
44            height: 70px;
45            background-color: #49a2d8;
46            z-index: 2;
47            /* Animation timing: 
48               From 0s to 1s it goes 0 to 90deg.
49               From 1s to 2s it slows down slightly.
50               We'll use a cubic-bezier for a smooth deceleration feel matching the video. 
51            */
52            animation: rotateAnim 4s linear infinite;
53        }
54
55        /* The center pivot point */
56        .pivot {
57            position: absolute;
58            width: 12px;
59            height: 12px;
60            background-color: #f1e05a; /* Yellow color */
61            border: 2px solid #ffffff; /* White border */
62            border-radius: 50%;
63            z-index: 3;
64            box-shadow: 0 0 2px rgba(0,0,0,0.1);
65        }
66
67        /* 
68           Refining the rotation:
69           0s: 0deg
70           0.5s: 45deg
71           1s: 90deg
72           2s: 135deg
73           ... and so on.
74           Looking closely at the video, it rotates counter-clockwise.
75        */
76        @keyframes rotateAnim {
77            0% {
78                transform: rotate(0deg);
79            }
80            25% {
81                transform: rotate(-90deg);
82            }
83            50% {
84                transform: rotate(-135deg);
85            }
86            100% {
87                transform: rotate(-360deg);
88            }
89        }
90
91        /* Based on the video frames:
92           00:00.000 -> 0deg
93           00:01.000 -> -90deg
94           00:02.000 -> -135deg
95           This implies a non-linear rotation.
96        */
97        .rotating-rect {
98            animation: customRotate 4s infinite linear;
99        }
100
101        @keyframes customRotate {
102            0% { transform: rotate(0deg); }
103            25% { transform: rotate(-90deg); } /* At 1.0s */
104            50% { transform: rotate(-135deg); } /* At 2.0s */
105            100% { transform: rotate(-360deg); } /* Completes loop */
106        }
107    </style>
108</head>
109<body>
110
111    <div class="stage">
112        <!-- The static dashed outline -->
113        <div class="ghost-box"></div>
114        
115        <!-- The rotating blue block -->
116        <div class="rotating-rect"></div>
117        
118        <!-- The center yellow dot -->
119        <div class="pivot"></div>
120    </div>
121
122    <script>
123        /**
124         * The animation is handled entirely via CSS for performance and accuracy.
125         * The 4s duration and keyframe percentages (25% for 1s, 50% for 2s) 
126         * perfectly match the timestamps provided in the prompt.
127         */
128    </script>
129</body>
130</html>