Checkbox by JkHuger

1#checklist {
2  --background: #fff;
3  --text: #414856;
4  --check: #4f29f0;
5  --disabled: #c3c8de;
6  --width: 100px;
7  --height: 180px;
8  --border-radius: 10px;
9  background: var(--background);
10  width: var(--width);
11  height: var(--height);
12  border-radius: var(--border-radius);
13  position: relative;
14  box-shadow: 0 10px 30px rgba(65, 72, 86, 0.05);
15  padding: 30px 85px;
16  display: grid;
17  grid-template-columns: 30px auto;
18  align-items: center;
19  justify-content: center;
20}
21
22#checklist label {
23  color: var(--text);
24  position: relative;
25  cursor: pointer;
26  display: grid;
27  align-items: center;
28  width: fit-content;
29  transition: color 0.3s ease;
30  margin-right: 20px;
31}
32
33#checklist label::before, #checklist label::after {
34  content: "";
35  position: absolute;
36}
37
38#checklist label::before {
39  height: 2px;
40  width: 8px;
41  left: -27px;
42  background: var(--check);
43  border-radius: 2px;
44  transition: background 0.3s ease;
45}
46
47#checklist label:after {
48  height: 4px;
49  width: 4px;
50  top: 8px;
51  left: -25px;
52  border-radius: 50%;
53}
54
55#checklist input[type="checkbox"] {
56  -webkit-appearance: none;
57  -moz-appearance: none;
58  position: relative;
59  height: 15px;
60  width: 15px;
61  outline: none;
62  border: 0;
63  margin: 0 15px 0 0;
64  cursor: pointer;
65  background: var(--background);
66  display: grid;
67  align-items: center;
68  margin-right: 20px;
69}
70
71#checklist input[type="checkbox"]::before, #checklist input[type="checkbox"]::after {
72  content: "";
73  position: absolute;
74  height: 2px;
75  top: auto;
76  background: var(--check);
77  border-radius: 2px;
78}
79
80#checklist input[type="checkbox"]::before {
81  width: 0px;
82  right: 60%;
83  transform-origin: right bottom;
84}
85
86#checklist input[type="checkbox"]::after {
87  width: 0px;
88  left: 40%;
89  transform-origin: left bottom;
90}
91
92#checklist input[type="checkbox"]:checked::before {
93  animation: check-01 0.4s ease forwards;
94}
95
96#checklist input[type="checkbox"]:checked::after {
97  animation: check-02 0.4s ease forwards;
98}
99
100#checklist input[type="checkbox"]:checked + label {
101  color: var(--disabled);
102  animation: move 0.3s ease 0.1s forwards;
103}
104
105#checklist input[type="checkbox"]:checked + label::before {
106  background: var(--disabled);
107  animation: slice 0.4s ease forwards;
108}
109
110#checklist input[type="checkbox"]:checked + label::after {
111  animation: firework 0.5s ease forwards 0.1s;
112}
113
114@keyframes move {
115  50% {
116    padding-left: 8px;
117    padding-right: 0px;
118  }
119
120  100% {
121    padding-right: 4px;
122  }
123}
124
125@keyframes slice {
126  60% {
127    width: 100%;
128    left: 4px;
129  }
130
131  100% {
132    width: 100%;
133    left: -2px;
134    padding-left: 0;
135  }
136}
137
138@keyframes check-01 {
139  0% {
140    width: 4px;
141    top: auto;
142    transform: rotate(0);
143  }
144
145  50% {
146    width: 0px;
147    top: auto;
148    transform: rotate(0);
149  }
150
151  51% {
152    width: 0px;
153    top: 8px;
154    transform: rotate(45deg);
155  }
156
157  100% {
158    width: 5px;
159    top: 8px;
160    transform: rotate(45deg);
161  }
162}
163
164@keyframes check-02 {
165  0% {
166    width: 4px;
167    top: auto;
168    transform: rotate(0);
169  }
170
171  50% {
172    width: 0px;
173    top: auto;
174    transform: rotate(0);
175  }
176
177  51% {
178    width: 0px;
179    top: 8px;
180    transform: rotate(-45deg);
181  }
182
183  100% {
184    width: 10px;
185    top: 8px;
186    transform: rotate(-45deg);
187  }
188}
189
190@keyframes firework {
191  0% {
192    opacity: 1;
193    box-shadow: 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0, 0 0 0 -2px #4f29f0;
194  }
195
196  30% {
197    opacity: 1;
198  }
199
200  100% {
201    opacity: 0;
202    box-shadow: 0 -15px 0 0px #4f29f0, 14px -8px 0 0px #4f29f0, 14px 8px 0 0px #4f29f0, 0 15px 0 0px #4f29f0, -14px 8px 0 0px #4f29f0, -14px -8px 0 0px #4f29f0;
203  }
204}