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

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.

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:-

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


Leave a Reply