1#c {
2  display: none;
3}
4
5#upload_app {
6  display: block;
7  position: absolute;
8  top: 50%;
9  right: 0;
10  left: 0;
11  margin: 0 auto;
12  width: 120px;
13  height: 42px;
14  transform: translateY(-50%);
15  transition: 0.3s ease width;
16  cursor: pointer;
17}
18
19#app {
20  position: absolute;
21  top: 0;
22  right: 0;
23  bottom: 0;
24  left: 0;
25  background-color: #fff;
26  border: 2px solid #143240;
27  overflow: hidden;
28  z-index: 2;
29}
30
31#app:before {
32  content: "Upload";
33  position: absolute;
34  top: 0;
35  right: 0;
36  padding: 12px;
37  left: 0;
38  color: #143240;
39  font-size: 14px;
40  line-height: 14px;
41  font-weight: bold;
42  z-index: 1;
43}
44
45#arrow {
46  position: absolute;
47  top: 0;
48  right: 0;
49  width: 38px;
50  height: 38px;
51  background-color: #fff;
52  z-index: 2;
53}
54
55#arrow:before,
56#arrow:after {
57  content: "";
58  position: absolute;
59  top: 18px;
60  width: 10px;
61  height: 2px;
62  background-color: #143240;
63}
64
65#arrow:before {
66  right: 17px;
67  transform: rotateZ(-45deg);
68}
69
70#arrow:after {
71  right: 11px;
72  transform: rotateZ(45deg);
73}
74
75#success {
76  position: absolute;
77  top: 0;
78  right: 0;
79  width: 54px;
80  height: 54px;
81  margin: -8px;
82  background-color: #143240;
83  transform: scale(0);
84  border-radius: 50%;
85  z-index: 3;
86}
87
88#success i {
89  font-size: 20px;
90  color: #fff;
91  display: block;
92  width: 20px;
93  height: 20px;
94  margin: 17px auto;
95  transform: scale(0);
96}
97
98#c:checked + #upload_app {
99  width: 42px;
100}
101
102#c:checked + #upload_app #arrow:before {
103  animation: _a 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
104}
105
106#c:checked + #upload_app #arrow:after {
107  animation: _b 0.4s ease 0.4s forwards, _incHeight 4s ease 1s forwards;
108}
109
110#c:checked + #upload_app #success {
111  animation: _success 0.4s cubic-bezier(0, 0.74, 0.32, 1.21) 5s forwards;
112}
113
114#c:checked + #upload_app #success i {
115  animation: _success 0.3s cubic-bezier(0, 0.74, 0.32, 1.21) 5.2s forwards;
116}
117
118@keyframes _a {
119  0% {
120    top: 18px;
121    right: 17px;
122    width: 10px;
123    transform: rotateZ(-45deg);
124    background-color: #143240;
125  }
126
127  100% {
128    top: 36px;
129    right: 19px;
130    width: 19px;
131    transform: rotateZ(0deg);
132    background-color: #ffc107;
133  }
134}
135
136@keyframes _b {
137  0% {
138    top: 18px;
139    right: 11px;
140    width: 10px;
141    transform: rotateZ(45deg);
142    background-color: #143240;
143  }
144
145  100% {
146    top: 36px;
147    right: 0;
148    width: 19px;
149    transform: rotateZ(0deg);
150    background-color: #ffc107;
151  }
152}
153
154@keyframes _incHeight {
155  0% {
156    top: 36px;
157    height: 2px;
158  }
159
160  25% {
161    top: 31px;
162    height: 8px;
163  }
164
165  50% {
166    top: 21px;
167    height: 18px;
168  }
169
170  80% {
171    top: 11px;
172    height: 28px;
173  }
174
175  100% {
176    top: 0;
177    height: 39px;
178  }
179}
180
181@keyframes _success {
182  0% {
183    transform: scale(0);
184  }
185
186  100% {
187    transform: scale(1);
188  }
189}
190