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