1.check {
2 position: relative;
3 width: 20px;
4 height: 20px;
5 border-radius: 2px;
6 appearance: none;
7 background-color: #bbb;
8 transition: all .3s;
9}
10
11.check::before {
12 content: '';
13 position: absolute;
14 border: solid #fff;
15 display: block;
16 width: .3em;
17 height: .6em;
18 border-width: 0 .2em .2em 0;
19 z-index: 1;
20 opacity: 0;
21 right: calc(50% - .3em);
22 top: calc(50% - .6em);
23 transform: rotate(0deg);
24 transition: all .3s;
25 transform-origin: center center;
26}
27
28.check:checked {
29 animation: a .3s ease-in forwards;
30 background-color: rgb(120, 190, 120);
31}
32
33.check:checked::before {
34 opacity: 1;
35 transform: rotate(405deg);
36}
37
38@keyframes a {
39 0% {
40  opacity: 1;
41  transform: scale(1) rotateY(0deg);
42 }
43
44 50% {
45  opacity: 0;
46  transform: scale(.8) rotateY(180deg);
47 }
48
49 100% {
50  opacity: 1;
51  transform: scale(1) rotateY(360deg);
52 }
53}