1.switch {
2  position: relative;
3  width: 130px;
4  height: 50px;
5  margin: 0px;
6  appearance: none;
7  -webkit-appearance: none;
8  background-color: rgb(4,52,73);
9  background-size: cover;
10  background-repeat: no-repeat;
11  border-radius: 25px;
12  transition: background-image .7s ease-in-out;
13  outline: none;
14  cursor: pointer;
15  overflow: hidden;
16}
17
18.switch:checked {
19  background-color: rgb(0, 195, 255);
20  background-size: cover;
21  transition: background-image 1s ease-in-out;
22}
23
24.switch:after {
25  content: '';
26  width: 46px;
27  height: 46px;
28  border-radius: 50%;
29  background-color: #fff;
30  position: absolute;
31  left: 2px;
32  top: 2px;
33  transform: translateX(0px);
34  animation: off .7s forwards cubic-bezier(.8, .5, .2, 1.4);
35  box-shadow: inset 5px -5px 4px rgba(53, 53, 53, 0.3);
36}
37
38@keyframes off {
39  0% {
40    transform: translateX(80px);
41    width: 46px;
42  }
43
44  50% {
45    width: 75px;
46    border-radius: 25px;
47  }
48
49  100% {
50    transform: translateX(0px);
51    width: 46px;
52  }
53}
54
55.switch:checked:after {
56  animation: on .7s forwards cubic-bezier(.8, .5, .2, 1.4);
57  box-shadow: inset -5px -5px 4px rgba(53, 53, 53, 0.3);
58}
59
60@keyframes on {
61  0% {
62    transform: translateX(0px);
63    width: 46px;
64  }
65
66  50% {
67    width: 75px;
68    border-radius: 25px;
69  }
70
71  100% {
72    transform: translateX(80px);
73    width: 46px;
74  }
75}
76
77.switch:checked:before {
78  content: '';
79  width: 15px;
80  height: 15px;
81  border-radius: 50%;
82  position: absolute;
83  left: 15px;
84  top: 5px;
85  transform-origin: 53px 10px;
86  background-color: transparent;
87  box-shadow: 5px -1px 0px #fff;
88  filter: blur(0px);
89  animation: sun .7s forwards ease;
90}
91
92@keyframes sun {
93  0% {
94    transform: rotate(170deg);
95    background-color: transparent;
96    box-shadow: 5px -1px 0px #fff;
97    filter: blur(0px);
98  }
99
100  50% {
101    background-color: transparent;
102    box-shadow: 5px -1px 0px #fff;
103    filter: blur(0px);
104  }
105
106  90% {
107    background-color: #f5daaa;
108    box-shadow: 0px 0px 10px #f5deb4,
109    0px 0px 20px #f5deb4,
110    0px 0px 30px #f5deb4,
111     inset 0px 0px 2px #efd3a3;
112    filter: blur(1px);
113  }
114
115  100% {
116    transform: rotate(0deg);
117    background-color: #f5daaa;
118    box-shadow: 0px 0px 10px #f5deb4,
119    0px 0px 20px #f5deb4,
120    0px 0px 30px #f5deb4,
121     inset 0px 0px 2px #efd3a3;
122    filter: blur(1px);
123  }
124}
125
126.switch:before {
127  content: '';
128  width: 15px;
129  height: 15px;
130  border-radius: 50%;
131  position: absolute;
132  left: 15px;
133  top: 5px;
134  filter: blur(1px);
135  background-color: #f5daaa;
136  box-shadow: 0px 0px 10px #f5deb4,
1370px 0px 20px #f5deb4,
1380px 0px 30px #f5deb4,
139 inset 0px 0px 2px #efd3a3;
140  transform-origin: 53px 10px;
141  animation: moon .7s forwards ease;
142}
143
144@keyframes moon {
145  0% {
146    transform: rotate(0deg);
147    filter: blur(1px);
148  }
149
150  50% {
151    filter: blur(1px);
152  }
153
154  90% {
155    background-color: transparent;
156    box-shadow: 5px -1px 0px #fff;
157    filter: blur(0px);
158  }
159
160  100% {
161    transform: rotate(170deg);
162    background-color: transparent;
163    box-shadow: 5px -1px 0px #fff;
164    filter: blur(0px);
165  }
166}
167