Toggle(css keyframe animination) | toggle ( css keyframe animination )using html css js
Toggle(css keyframe animination) | toggle ( css keyframe animination )using html css js
LIVE SERVER OF TOGGLE(CSS KEYFRAME ANIMINATION):-
See the Pen Toggle (CSS keyframe animation) by Roope Palomäki (@roopepal) on CodePen.
HTML CODE:-
<div class="holder">
<div class="toggle"></div>
</div>
HTML OUTPUT:-
CSS CODE:-
body
background: #181818
.holder
position: relative
height: 100px
width: 200px
margin: 100px
border-radius: 50px
background: #bdc3c7
transition: 0.15s background ease-out
.toggle
position: absolute
top: -10px
width: 120px
height: 120px
border-radius: 60px
background: #ecf0f1
box-shadow: 0 8px 20px 0 rgba(0,0,0,0.25)
@keyframes toggleOn
0%
height: 120px
left: -10px
top: -10px
border-radius: 60px
background: #ecf0f1
15%
height: 100px
left: 40px
top: 0px
border-radius: 100px
100%
height: 120px
left: 90px
top: -10px
border-radius: 60px
background: #2ecc71
@keyframes toggleOff
0%
height: 120px
left: 90px
top: -10px
border-radius: 60px
background: #2ecc71
15%
height: 100px
left: 40px
top: 0px
border-radius: 100px
100%
height: 120px
left: -10px
top: -10px
border-radius: 60px
background: #ecf0f1
.off
background: #bdc3c7
.on
background: #27ae60
.on .toggle
animation: toggleOn 0.15s ease-out
left: 90px
background: #2ecc71
.off .toggle
animation: toggleOff 0.15s ease-out
left: -10px
CSS OUTPUT:-

Do you want to learn HTML to React? 🔥
If yes, then here is our Master HTML to React 📚 In this eBook, you’ll Get Complete Free Hand Written Notes on HTML, CSS, JavaScript, and React 💪. It includes 450 Projects with source code. and 250+ Most Asked Interview Questions
Get your eBook now! 👇
JS CODE:-
$('.holder').on('click', function() {
if ($(this).hasClass('on') || $(this).hasClass('off')) {
$(this).toggleClass('on');
$(this).toggleClass('off');
}
else {
$(this).addClass('on');
}
});