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.

Table of Contents

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

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! 👇

Tap Me for eBook ➡️

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');  
  }  
 });