Toggle(css keyframe animination) | toggle ( css keyframe animination )using html css js

Toggle(css keyframe animination) |  toggle ( css keyframe animination )using html css js

Welcome all to codewithrandom.Today we are creating a TOGGLE KEYFRAME ANIMATION.For this we are using HTML,CSS AND JS.First we want to know that what is Toggle.
Toggle is a switch from one effect, feature, or state to another by using a toggle it is play/pause  or on/off butoon toggle between those function.
CSS KEYFRAME is use for animnation and if we want to perform any animation its give more control.

LIVE SERVER OF TOGGLE(CSS KEYFRAME ANIMINATION):-

See the Pen Toggle (CSS keyframe animation) by Roope Palomäki (@roopepal) on CodePen.

HTML CODE:-

In html code they are given only class name which are holder and toggle.
 <div class="holder">  
<div class="toggle"></div>
</div>

HTML OUTPUT:-

The output of this code will blank the output will come when we designing with css.

CSS CODE:-

Here in css they are mention only toggle on and height weight background colour position which it can be look acttractive.
 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:-

JS CODE:-

In js when we click on button the button will on/off.
 $('.holder').on('click', function() {  
if ($(this).hasClass('on') || $(this).hasClass('off')) {
$(this).toggleClass('on');
$(this).toggleClass('off');
}
else {
$(this).addClass('on');
}
});

JS OUTPUT:-

Finally your TOGGLE(CSS KEYFRAME ANIMINATION) is ready now you can use for on/off button.
Hope you may like it.If any doubt comment down in comment box.
Let us know your review.
WRITTEN BY – SAYALI KHARAT

Leave a Reply