Skip to content

Instantly share code, notes, and snippets.

@vortizhe
Last active January 7, 2018 10:43
Show Gist options
  • Save vortizhe/1652e885796e60abbe584a5020acdc11 to your computer and use it in GitHub Desktop.
Save vortizhe/1652e885796e60abbe584a5020acdc11 to your computer and use it in GitHub Desktop.
Checkbox with switch style full css animation
<div class="switcher">
<input type="checkbox", name="wadus" id="wadus">
<label for="wadus" class="switch"></label>
</div>
.switcher {
position: relative;
display: inline-block;
input {
position: absolute;
&:checked + .switch {
background: #0077CC;
&:after {
animation: to-checked 0.35s ease-in forwards;
}
}
}
.switch {
position: relative;
display: block;
width: 44px; height: 24px;
border-radius: 12px;
background: #E6E8EB;
cursor: pointer;
transition: all 0.3s ease;
&:hover {
box-shadow: inset 0 0 6px rgba(0,0,0,.25);
}
&:after {
display: block;
content: '';
position: absolute;
top: 3px; left: 3px;
width: 18px; height: 18px;
background: #FFF;
border-radius: 9px;
animation: to-unchecked 0.35s ease-in forwards;
}
}
}
@keyframes to-checked {
0% {
transform: translate3d(0, 0, 0);
}
50% {
width: 26px;
}
100% {
transform: translate3d(20px, 0, 0);
}
}
@keyframes to-unchecked {
0% {
transform: translate3d(20px, 0, 0);
}
50% {
width: 26px;
}
100% {
transform: translate3d(0, 0, 0);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment