← back to Only CSS: Joint Animationcompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Joint Animation
A 0.77T 0.25
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 Arm Animation</title>
7 <style>
8 body {
9 margin: 0;
10 padding: 0;
11 display: flex;
12 justify-content: center;
13 align-items: center;
14 height: 100vh;
15 background-color: #ffffff;
16 overflow: hidden;
17 }
18
19 .scene {
20 position: relative;
21 width: 400px;
22 height: 400px;
23 /* Added a subtle tilt to match the initial frame of the video */
24 transform: rotate(3deg);
25 }
26
27 /* Pivot point container */
28 .joint-container {
29 position: absolute;
30 top: 50%;
31 left: 50%;
32 transform: translate(-50%, -50%);
33 width: 44px;
34 height: 44px;
35 z-index: 10;
36 }
37
38 /* The blue square joint background */
39 .joint-box {
40 position: absolute;
41 width: 100%;
42 height: 100%;
43 background-color: #2e86c1;
44 display: flex;
45 justify-content: center;
46 align-items: center;
47 z-index: 5;
48 }
49
50 /* Inner light blue circle in the joint */
51 .joint-circle {
52 width: 24px;
53 height: 24px;
54 background-color: #5dade2;
55 border-radius: 50%;
56 display: flex;
57 justify-content: center;
58 align-items: center;
59 }
60
61 /* Grey Arm (Moving) */
62 .arm-grey {
63 position: absolute;
64 right: 22px; /* Half of joint width */
65 top: 50%;
66 transform: translateY(-50%);
67 width: 150px;
68 height: 40px;
69 background-color: #919191;
70 transform-origin: right center;
71 animation: swing 2s ease-in-out infinite;
72 z-index: 2;
73 }
74
75 /* Dashed Ghost outline of the grey arm */
76 .arm-ghost {
77 position: absolute;
78 right: 22px;
79 top: 50%;
80 transform: translateY(-50%);
81 width: 150px;
82 height: 40px;
83 border: 1px dashed #919191;
84 box-sizing: border-box;
85 z-index: 1;
86 }
87
88 /* Blue Arm (Static) */
89 .arm-blue {
90 position: absolute;
91 left: 22px; /* Half of joint width */
92 top: 50%;
93 transform: translateY(-50%);
94 width: 150px;
95 height: 40px;
96 background-color: #5dade2;
97 z-index: 3;
98 }
99
100 /* Yellow Dots */
101 .dot {
102 position: absolute;
103 width: 12px;
104 height: 12px;
105 background-color: #f4d03f;
106 border-radius: 50%;
107 border: 1px solid rgba(0,0,0,0.1);
108 }
109
110 /* Dot on the end of the grey arm */
111 .dot-grey {
112 left: 15px;
113 top: 50%;
114 transform: translateY(-50%);
115 }
116
117 /* Dot in the center of the joint */
118 .dot-joint {
119 position: relative; /* relative to joint-circle */
120 width: 10px;
121 height: 10px;
122 background-color: #f4d03f;
123 border-radius: 50%;
124 }
125
126 @keyframes swing {
127 0%, 100% {
128 transform: translateY(-50%) rotate(0deg);
129 }
130 50% {
131 transform: translateY(-50%) rotate(-90deg);
132 }
133 }
134 </style>
135</head>
136<body>
137
138 <div class="scene">
139 <!-- Ghost position -->
140 <div class="arm-ghost"></div>
141
142 <!-- Static Blue Arm -->
143 <div class="arm-blue"></div>
144
145 <!-- Animated Grey Arm -->
146 <div class="arm-grey">
147 <div class="dot dot-grey"></div>
148 </div>
149
150 <!-- The Joint -->
151 <div class="joint-container">
152 <div class="joint-box">
153 <div class="joint-circle">
154 <div class="dot-joint"></div>
155 </div>
156 </div>
157 </div>
158 </div>
159
160</body>
161</html>