Switch by vk-uiux
#e8e8e8
1#checkbox { 2 display: none; 3} 4 5.toggle { 6 position: relative; 7 width: 40px; 8 cursor: pointer; 9 margin: auto; 10 display: block; 11 height: calc(4px * 3 + 11px * 2); 12} 13 14.bar { 15 position: absolute; 16 left: 0; 17 right: 0; 18 height: 4px; 19 border-radius: calc(4px / 2); 20 background: #7b52b9; 21 color: inherit; 22 opacity: 1; 23 transition: none 0.35s cubic-bezier(.5,-0.35,.35,1.5) 0s; 24} 25 26/***** Collapse Animation *****/ 27 28.bar--top { 29 bottom: calc(50% + 11px + 4px/ 2); 30 transition-property: bottom,margin,transform; 31 transition-delay: calc(0s + 0.35s),0s,0s; 32} 33 34.bar--middle { 35 top: calc(50% - 4px/ 2); 36 transition-property: top,opacity; 37 transition-duration: 0.35s,0s; 38 transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3); 39} 40 41.bar--bottom { 42 top: calc(50% + 11px + 4px/ 2); 43 transition-property: top,transform; 44 transition-delay: 0s; 45} 46 47#checkbox:checked + .toggle .bar--top { 48 bottom: calc(50% - 11px - 4px); 49 margin-bottom: calc(11px + 4px/ 2); 50 transform: rotate(45deg); 51 transition-delay: calc(0s + 0.35s * .3),calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3); 52} 53 54#checkbox:checked + .toggle .bar--middle { 55 top: calc(50% + 11px); 56 opacity: 0; 57 transition-duration: 0.35s,0s; 58 transition-delay: 0s,calc(0s + 0.35s); 59} 60 61#checkbox:checked + .toggle .bar--bottom { 62 top: calc(50% - 4px/ 2); 63 transform: rotate(-45deg); 64 transition-delay: calc(0s + 0.35s * 1.3),calc(0s + 0.35s * 1.3); 65}
2K views
2K views
MIT License