CRM系统前端
查看 | 历史 | 提交 | 提交对比
vben
2023-04-05 d25df8321e22c76d1abe01fe4f969520555d20fa
提交 | 用户 | age
d25df8 1 * > .enter-x:nth-child(1) {
V 2   transform: translateX(50px);
3 }
4 * > .-enter-x:nth-child(1) {
5   transform: translateX(-50px);
6 }
7
8 * > .enter-x:nth-child(1),
9 * > .-enter-x:nth-child(1) {
10   z-index: 9;
11   opacity: 0;
12   animation: enter-x-animation 0.4s ease-in-out 0.3s;
13   animation-fill-mode: forwards;
14   animation-delay: 0.1s;
15 }
16 * > .enter-x:nth-child(2) {
17   transform: translateX(50px);
18 }
19 * > .-enter-x:nth-child(2) {
20   transform: translateX(-50px);
21 }
22
23 * > .enter-x:nth-child(2),
24 * > .-enter-x:nth-child(2) {
25   z-index: 8;
26   opacity: 0;
27   animation: enter-x-animation 0.4s ease-in-out 0.3s;
28   animation-fill-mode: forwards;
29   animation-delay: 0.2s;
30 }
31 * > .enter-x:nth-child(3) {
32   transform: translateX(50px);
33 }
34 * > .-enter-x:nth-child(3) {
35   transform: translateX(-50px);
36 }
37
38 * > .enter-x:nth-child(3),
39 * > .-enter-x:nth-child(3) {
40   z-index: 7;
41   opacity: 0;
42   animation: enter-x-animation 0.4s ease-in-out 0.3s;
43   animation-fill-mode: forwards;
44   animation-delay: 0.3s;
45 }
46
47 * > .enter-x:nth-child(4) {
48   transform: translateX(50px);
49 }
50 * > .-enter-x:nth-child(4) {
51   transform: translateX(-50px);
52 }
53
54 * > .enter-x:nth-child(4),
55 * > .-enter-x:nth-child(4) {
56   z-index: 6;
57   opacity: 0;
58   animation: enter-x-animation 0.4s ease-in-out 0.3s;
59   animation-fill-mode: forwards;
60   animation-delay: 0.4s;
61 }
62
63 * > .enter-x:nth-child(5) {
64   transform: translateX(50px);
65 }
66 * > .-enter-x:nth-child(5) {
67   transform: translateX(-50px);
68 }
69
70 * > .enter-x:nth-child(5),
71 * > .-enter-x:nth-child(5) {
72   z-index: 5;
73   opacity: 0;
74   animation: enter-x-animation 0.4s ease-in-out 0.3s;
75   animation-fill-mode: forwards;
76   animation-delay: 0.5s;
77 }
78
79 * > .enter-y:nth-child(1) {
80   transform: translateX(50px);
81 }
82 * > .-enter-y:nth-child(1) {
83   transform: translateX(-50px);
84 }
85
86 * > .enter-y:nth-child(1),
87 * > .-enter-y:nth-child(1) {
88   z-index: 9;
89   opacity: 0;
90   animation: enter-y-animation 0.4s ease-in-out 0.3s;
91   animation-fill-mode: forwards;
92   animation-delay: 0.1s;
93 }
94 * > .enter-y:nth-child(2) {
95   transform: translateX(50px);
96 }
97 * > .-enter-y:nth-child(2) {
98   transform: translateX(-50px);
99 }
100
101 * > .enter-y:nth-child(2),
102 * > .-enter-y:nth-child(2) {
103   z-index: 8;
104   opacity: 0;
105   animation: enter-y-animation 0.4s ease-in-out 0.3s;
106   animation-fill-mode: forwards;
107   animation-delay: 0.2s;
108 }
109 * > .enter-y:nth-child(3) {
110   transform: translateX(50px);
111 }
112 * > .-enter-y:nth-child(3) {
113   transform: translateX(-50px);
114 }
115
116 * > .enter-y:nth-child(3),
117 * > .-enter-y:nth-child(3) {
118   z-index: 7;
119   opacity: 0;
120   animation: enter-y-animation 0.4s ease-in-out 0.3s;
121   animation-fill-mode: forwards;
122   animation-delay: 0.3s;
123 }
124
125 * > .enter-y:nth-child(4) {
126   transform: translateX(50px);
127 }
128 * > .-enter-y:nth-child(4) {
129   transform: translateX(-50px);
130 }
131
132 * > .enter-y:nth-child(4),
133 * > .-enter-y:nth-child(4) {
134   z-index: 6;
135   opacity: 0;
136   animation: enter-y-animation 0.4s ease-in-out 0.3s;
137   animation-fill-mode: forwards;
138   animation-delay: 0.4s;
139 }
140
141 * > .enter-y:nth-child(5) {
142   transform: translateX(50px);
143 }
144 * > .-enter-y:nth-child(5) {
145   transform: translateX(-50px);
146 }
147
148 * > .enter-y:nth-child(5),
149 * > .-enter-y:nth-child(5) {
150   z-index: 5;
151   opacity: 0;
152   animation: enter-y-animation 0.4s ease-in-out 0.3s;
153   animation-fill-mode: forwards;
154   animation-delay: 0.5s;
155 }
156
157 @keyframes enter-x-animation {
158   to {
159     opacity: 1;
160     transform: translateX(0);
161   }
162 }
163 @keyframes enter-y-animation {
164   to {
165     opacity: 1;
166     transform: translateY(0);
167   }
168 }