1.switch {
2  font-size: 17px;
3  position: relative;
4  display: inline-block;
5  width: 70px;
6  height: 34.5px;
7  overflow: hidden;
8}
9
10.switch input {
11  opacity: 0;
12  width: 0;
13  height: 0;
14}
15
16.slider {
17  position: absolute;
18  cursor: pointer;
19  top: 0;
20  left: 0;
21  right: 0;
22  bottom: 0;
23  background-color: #ccc;
24  transition: .4s;
25  border-radius: 30px;
26}
27
28.commutator {
29  cursor: pointer;
30  position: absolute;
31  top: -29%;
32  left: -14%;
33  transition: .4s;
34}
35
36.iron-man {
37  position: absolute;
38  top: -27%;
39  left: -100%;
40  transform: rotate(90deg);
41}
42
43.input:checked + .slider {
44  background-color: #2196F3;
45}
46
47.input:checked + .slider .commutator {
48  transform: translateX(34.5px);
49  opacity: 0;
50}
51
52.input:checked + .slider .iron-man {
53  animation: show_5911 1.3s ease-in-out forwards;
54}
55
56@keyframes show_5911 {
57  0% {
58    transform: translateX(0px) rotate(90deg);
59  }
60
61  50% {
62    transform: translateX(75px) rotate(90deg);
63  }
64
65  100% {
66    transform: translateX(79px) rotate(0deg);
67  }
68}