model output
Gemini 3 Flash Preview

Only CSS: Joint Animation
A 0.79T 0.13
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>Bending L-Shape Animation</title>
7  <style>
8    /* Reset and Center 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 shape */
21    .animation-container {
22      position: relative;
23      /* The pivot point is the mathematical center of this container */
24    }
25
26    /* Common styles for both halves of the bar */
27    .segment {
28      position: absolute;
29      width: 160px;
30      height: 48px;
31      background-color: #3b98c9;
32      border-radius: 24px;
33      /* Sets the pivot point at the center of the first rounded cap */
34      transform-origin: 24px 24px;
35      /* Positions the pivot point at the center of the container */
36      top: -24px;
37      left: -24px;
38      will-change: transform;
39    }
40
41    /* The right side of the bar which remains static */
42    .base {
43      transform: rotate(0deg);
44    }
45
46    /* The left side of the bar which bends upwards to form the "L" */
47    .upright {
48      /* Animation duration matches the loop timing observed:
49         - 0.0s to 1.0s: Bending Up (40%)
50         - 1.0s to 1.5s: Holding "L" shape (20%)
51         - 1.5s to 2.5s: Bending Down (40%) 
52         The video ends at 2.0s, showing a partial return. */
53      animation: bend-animation 2.5s ease-in-out infinite;
54    }
55
56    @keyframes bend-animation {
57      0% {
58        /* Starting position: pointing directly left (180 degrees) */
59        transform: rotate(180deg);
60      }
61      40% {
62        /* Bends clockwise to point directly up (270 degrees) at 1.0s mark */
63        transform: rotate(270deg);
64      }
65      60% {
66        /* Holds the "L" shape until 1.5s mark */
67        transform: rotate(270deg);
68      }
69      100% {
70        /* Smoothly returns to horizontal by 2.5s */
71        transform: rotate(180deg);
72      }
73    }
74  </style>
75</head>
76<body>
77
78  <div class="animation-container">
79    <!-- Right side (horizontal) -->
80    <div class="segment base"></div>
81    <!-- Left side (animating) -->
82    <div class="segment upright"></div>
83  </div>
84
85</body>
86</html>