<h1>SVG toggle animation</h1>
<h2>A full css/svg checkbox button</h2>
<hr>
<div class='checkbox'>
<label class='checkbox__container'>
<input class='checkbox__toggle' type='checkbox'>
<span class='checkbox__checker anim'></span>
<svg class='checkbox__path' id='checkbox__path' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
<path class='path path--top' d='M194.27,59.599l42.438-42.028
c-9.086-10.419-22.443-17.006-37.215-17.006c-35.529,0-46.643,27.712-75.047,27.712s-38-27.712-75.072-27.712
c-13.45,0-25.621,5.355-34.514,14.045l48.098,48.113'></path>
<path class='path path--bottom' d='M183.561,48.822l42.521,42.794
c-7.649,4.874-16.759,7.697-26.589,7.697c-34.914,0-46.643-30.202-75.06-30.202s-35.527,30.202-75.06,30.202
c-13.431,0-25.502-5.255-34.346-13.8l47.93-48.18'></path>
</svg>
<svg class='checkbox__bg' id='checkbox__bg' space='preserve' version='1.1' viewbox='0 0 248.868 99.876'>
<path class='shape-bg' d='M199.493,99.087c27.504,0,49.374-22.106,49.374-49.374S226.552,0.338,199.493,0.338c-35.529,0-46.643,27.712-75.047,27.712
s-38-27.712-75.072-27.712C22.048,0.338,0,22.444,0,49.713s21.826,49.374,49.374,49.374c39.533,0,46.643-30.202,75.06-30.202
S164.58,99.087,199.493,99.087z'></path>
</svg>
</label>
</div>
<hr>
<footer>
<a class='link' href='http://timguignard.com' target='_blank'>timguignard.com</a>
</footer>
//GLOBAL PRESENTATION
body{
background-color: #eee;
padding-top: 40px;
}
h1{
text-align: center;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
h2{
text-align: center;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 1.2px;
}
hr{
margin: 0 auto;
margin-top: 50px;
margin-bottom: 50px;
}
footer{
text-align: center;
padding-bottom: 50px;
}
.link{
text-align: center;
color: #278fb2;
}
//end global
//variables
$color-off: #bf1e1e;
$color-on: #0cb018;
//checkbox
.checkbox{
width: 200px;
margin: 0 auto;
&__container{
display: block;
position: relative;
height: 82px;
}
&__toggle{
display: none;
&:checked + .checkbox__checker {
//left: calc(100% - 76px);
//background-color: $color-on;
}
&:checked ~ .checkbox__path{
.path--top{
stroke-dashoffset: 0px;
stroke: $color-on;
}
.path--bottom{
stroke-dasharray: 14px 360px;//size of dash / space between...
stroke-dashoffset: 0px;
stroke: $color-on;
}
}
}
&__checker {
position: absolute;
top: 4px;
left: 4px;
//box-shadow: 0px 2px 6px rgba(0,0,0,.5);
z-index: 1;
display: block;
width: 73px;
height: 73px;
background-color: #fff;
//opacity: .5;
border-radius: 50%;
//transition: 1s;
z-index: 9;
}
&__bg, &__path{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&__bg{
.shape-bg{
fill: #aaa;
}
}
&__path{
z-index: 9;
.shape-bg{
fill: #fff;
stroke-width: 1px;
stroke: #aaa;
}
.path{
stroke-width: 4px;
stroke: $color-off;
fill: none;
stroke-linecap: round;
transition: 1s;
&--top{
stroke-dasharray: 33px 360px;//size of dash / space between...
stroke-dashoffset: -336px;
}
&--bottom{
stroke-dasharray: 33px 360px;//size of dash / space between...
stroke-dashoffset: -324px;
}
}
}
#checkbox__circle{
z-index: 9;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
fill: #fff;
}
}
//Animation
.anim{
transition-timing-function: cubic-bezier(0.385, -0.600, 0.685, 1.590);
transition-duration: .2s;
}
.anim--smallerize{
//transform: scale(.6, .6);
}
.anim--go-right{
left: calc(100% - 76px);
}
.anim--speed{
//animation-delay: .2s;
animation-duration: .5s;
animation-name: speedSmall;
}
//transitions test
@keyframes speed {
0% { transform: scaleY(.6); }
30% { transform: scaleY(2.3); }
60% { transform: scaleY(2.3); }
100% { transform: scaleY(.6); }
}
@keyframes speedSmall {
0% { transform: scale(1, 1); }
25% { transform: scale(.7, .7); }
35% { transform: scale(.7, .7); }
50% { transform: scale(.7, .3); }
65% { transform: scale(.7, .7); }
75% { transform: scale(.7, .7); }
100% { transform: scale(1, 1); }
}
View Compiled
var toggler = $('.checkbox__toggle');
var circle = $('.checkbox__checker');
var time1 = 150;
var time2 = 800;
toggler.click(function(){
circle.removeClass('anim--speed');
if($(this).is(":checked")){
setTimeout(function(){
circle.addClass('anim--speed');
},10);
setTimeout(function(){
circle.addClass('anim--go-right');
},time1);
}
else{
setTimeout(function(){
circle.addClass('anim--speed');
},10);
setTimeout(function(){
circle.removeClass('anim--go-right');
},time1);
}
})
This Pen doesn't use any external CSS resources.