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 Animation</title>
7<style>
8 * {
9 margin: 0;
10 padding: 0;
11 box-sizing: border-box;
12 }
13
14 body {
15 background-color: #f5f5e8;
16 width: 100vw;
17 height: 100vh;
18 display: flex;
19 justify-content: center;
20 align-items: center;
21 overflow: hidden;
22 }
23
24 .container {
25 position: relative;
26 width: 80px;
27 height: 30px;
28 display: flex;
29 justify-content: center;
30 align-items: center;
31 }
32
33 .dot {
34 width: 28px;
35 height: 28px;
36 background-color: #a03060;
37 border-radius: 50%;
38 position: absolute;
39 }
40
41 .dot-left {
42 animation: splitLeft 2s ease-in-out infinite;
43 }
44
45 .dot-right {
46 animation: splitRight 2s ease-in-out infinite;
47 }
48
49 @keyframes splitLeft {
50 0% {
51 transform: translateX(0);
52 }
53 30% {
54 transform: translateX(-22px);
55 }
56 50% {
57 transform: translateX(-22px);
58 }
59 80% {
60 transform: translateX(0);
61 }
62 100% {
63 transform: translateX(0);
64 }
65 }
66
67 @keyframes splitRight {
68 0% {
69 transform: translateX(0);
70 opacity: 0;
71 }
72 5% {
73 opacity: 0;
74 }
75 20% {
76 opacity: 1;
77 transform: translateX(22px);
78 }
79 50% {
80 transform: translateX(22px);
81 opacity: 1;
82 }
83 75% {
84 transform: translateX(0);
85 opacity: 0;
86 }
87 100% {
88 transform: translateX(0);
89 opacity: 0;
90 }
91 }
92</style>
93</head>
94<body>
95 <div class="container">
96 <div class="dot dot-left"></div>
97 <div class="dot dot-right"></div>
98 </div>
99</body>
100</html>