1/*------ Settings ------*/
2.container {
3  --color: #a5a5b0;
4  --size: 30px;
5  display: flex;
6  justify-content: center;
7  align-items: center;
8  position: relative;
9  cursor: pointer;
10  font-size: var(--size);
11  user-select: none;
12  fill: var(--color);
13}
14
15.container .check-regular {
16  position: absolute;
17  animation: keyframes-fill .5s;
18}
19
20.container .check-solid {
21  position: absolute;
22  display: none;
23  animation: keyframes-fill .5s;
24}
25
26/* ------ On check event ------ */
27.container input:checked ~ .check-regular {
28  display: none;
29}
30
31.container input:checked ~ .check-solid {
32  display: block;
33}
34
35/* ------ Hide the default checkbox ------ */
36.container input {
37  position: absolute;
38  opacity: 0;
39  height: 0;
40  width: 0;
41}
42
43/* ------ Animation ------ */
44@keyframes keyframes-fill {
45  0% {
46    transform: scale(0);
47    opacity: 0;
48  }
49
50  50% {
51    transform: scale(1.2) rotate(15deg);
52  }
53}