model output
Claude Sonnet 4.6

flat loading animate
A 0.95T 0.32
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>Dot Swap Animation</title>
7<style>
8  * {
9    margin: 0;
10    padding: 0;
11    box-sizing: border-box;
12  }
13
14  body {
15    width: 100vw;
16    height: 100vh;
17    background: white;
18    display: flex;
19    align-items: center;
20    justify-content: center;
21  }
22
23  .container {
24    position: relative;
25    width: 120px;
26    height: 30px;
27    display: flex;
28    align-items: center;
29    justify-content: space-between;
30  }
31
32  .dot {
33    width: 30px;
34    height: 30px;
35    border-radius: 50%;
36    position: absolute;
37  }
38
39  .dot-red {
40    background-color: #f05a4f;
41    animation: moveRight 1s ease-in-out infinite alternate;
42    left: 0;
43  }
44
45  .dot-blue {
46    background-color: #29abe2;
47    animation: moveLeft 1s ease-in-out infinite alternate;
48    right: 0;
49  }
50
51  @keyframes moveRight {
52    0% {
53      transform: translateX(0);
54    }
55    100% {
56      transform: translateX(90px);
57    }
58  }
59
60  @keyframes moveLeft {
61    0% {
62      transform: translateX(0);
63    }
64    100% {
65      transform: translateX(-90px);
66    }
67  }
68</style>
69</head>
70<body>
71  <div class="container">
72    <div class="dot dot-red"></div>
73    <div class="dot dot-blue"></div>
74  </div>
75</body>
76</html>