Icon Animate Using CSS

by Rayudu Ikkurthi

HTML

<h3>CSS Animated Hamburger Icon (click on hamburger)</h3>

<a class="list_btn" href="#"></a>

CSS

body { background-color: black; height: 100%; }
h3 { color: white; }
.list_btn { position: absolute; left: 50%; top: 50%; }
.list_btn { cursor: pointer; }
.list_btn, .list_btn:before, .list_btn:after {
      cursor: pointer;  
    border-radius: 1px;
    height: 5px;  width: 35px;
    background: white;
    position: absolute;
    display: block;
    content: '';
}
.list_btn:before {  top: -10px; }
.list_btn:after {  bottom: -10px;}
.list_btn, .list_btn:before, .list_btn:after { 
    transition: all 500ms ease-in-out;
}
.list_btn.active{  background-color: transparent;}
.list_btn.active:before, .list_btn.active:after {  top: 0;}
.list_btn.active:before {  transform: rotate(45deg);}
.list_btn.active:after {  transform: rotate(-45deg);}

JavaScript

document.querySelector( ".list_btn" )  .addEventListener( "click", function() {    this.classList.toggle( "active" );  });