Telegram Group Join Now
Toggle(css keyframe animination) | toggle ( css keyframe animination )using html css js
.png "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.
.png "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:-
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:-
.png "Toggle(css keyframe animination) | toggle ( css keyframe animination )using html css js")
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
