← back to Only CSS: Joint Animationcompare with ground truth →
model output
Gemini 3 Flash Preview
Only CSS: Joint Animation
A 0.88T 0.86
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 Linkage Animation</title>
7 <style>
8 /* Reset and center the scene */
9 body {
10 margin: 0;
11 padding: 0;
12 background-color: #ffffff;
13 display: flex;
14 justify-content: center;
15 align-items: center;
16 height: 100vh;
17 overflow: hidden;
18 }
19
20 /* Container for the linkage system */
21 .stage {
22 position: relative;
23 width: 400px;
24 height: 400px;
25 /* Adjust position to center the primary pivot */
26 transform: translateX(-40px);
27 }
28
29 /* Base properties for both arms */
30 .arm {
31 position: absolute;
32 height: 44px;
33 width: 170px;
34 transform-origin: 22px 22px; /* Set rotation point at the center of the first dot */
35 }
36
37 /* Grey bar styling and animation */
38 .arm-grey {
39 background-color: #9b9b9b;
40 z-index: 1;
41 animation: swing-grey 3s ease-in-out infinite;
42 }
43
44 /* Blue bar styling and animation. Using rgba for the semi-transparent overlap look */
45 .arm-blue {
46 background-color: rgba(93, 169, 214, 0.9);
47 left: 110px; /* Position relative to the grey bar to align pivots */
48 top: 0;
49 z-index: 2;
50 animation: swing-blue 3s ease-in-out infinite;
51 }
52
53 /* Yellow pivot point indicator */
54 .pivot-dot {
55 position: absolute;
56 width: 10px;
57 height: 10px;
58 background-color: #ffff00;
59 border: 3px solid #ffffff;
60 border-radius: 50%;
61 left: 9px; /* Calculated to center within the 44px height: (44/2) - (10/2 + 3) = 9 */
62 top: 9px;
63 display: flex;
64 align-items: center;
65 justify-content: center;
66 box-shadow: 0 0 1px rgba(0,0,0,0.1);
67 }
68
69 /* Inner hole detail for the pivot dot */
70 .pivot-dot::after {
71 content: '';
72 width: 2px;
73 height: 2px;
74 background-color: #444;
75 border-radius: 50%;
76 }
77
78 /**
79 * ANIMATION KEYFRAMES
80 * Matching the movement from the video:
81 * 0s: 0deg (Horizontal)
82 * 1s: ~90deg (Vertical)
83 * 1.5s: Peak of the swing (~100deg)
84 * 2s: Swinging back (~60deg)
85 */
86
87 @keyframes swing-grey {
88 0% {
89 transform: rotate(0deg);
90 }
91 50% {
92 transform: rotate(100deg); /* Peak of the downward swing */
93 }
94 100% {
95 transform: rotate(0deg);
96 }
97 }
98
99 @keyframes swing-blue {
100 0% {
101 transform: rotate(0deg);
102 }
103 /* Create a 'lag' effect relative to the grey bar during the movement */
104 30% {
105 transform: rotate(-4deg);
106 }
107 50% {
108 transform: rotate(0deg);
109 }
110 75% {
111 transform: rotate(14deg); /* Overshoot/lag during the return phase */
112 }
113 100% {
114 transform: rotate(0deg);
115 }
116 }
117 </style>
118</head>
119<body>
120
121 <div class="stage">
122 <!-- The grey arm acts as the parent for the blue arm to maintain mechanical connection -->
123 <div class="arm arm-grey">
124 <div class="pivot-dot"></div>
125
126 <div class="arm arm-blue">
127 <div class="pivot-dot"></div>
128 </div>
129 </div>
130 </div>
131
132</body>
133</html>