animation - CSS transition & transform from hamburger bars --> X on click (using stylus) -

i have menu hamburger "icon" mobile breakpoint. have set 3 lines , want them transition x (that close menu).

i want top bar go 45 degrees, middle bar disappear, , bottom bar go 45 degrees other way. top , bottom bars shift , create x

as of now....it animates long hold mouse down. why so? need animation complete on click.

html:

<a class="navbar-item-link" "javascript:void(0)" >     <div class="hamburger-icon"><span></span></div> </a> 

stylus:

.hamburger-icon     &:before, &.hamburger-icon span, &:after     content ''     display block     height 2px     width 20px     background-size 100%     background rgba(255,255,255,0.5)     margin 6px auto 7px auto     transition 0.2s linear      &:active         &.hamburger-icon span             background-color transparent         &:before             transform rotate(45deg)             top -10px             height 2px             background rgba(255,255,255,0.5)             width 30px         &:after             transform rotate(-45deg)             bottom -10px             height 2px             background rgba(255,255,255,0.5)             width 30px 

the :active acts mouse down. when you'll release click, animation stop.

you have few solutions using js or css.

in css, use keyframes sure animation finished.

in js, use click event animate icon js animations, or add class contain clicked properties.

---

the following example using preprocessor. less or sass have same syntax here:

.hamburger-icon {     /* .hamburger-icon styles */     &.active {         span {             background-color: transparent;         }         &:before {             transform: rotate(45deg);             top: -10px;             height: 2px;             background: rgba(255,255,255,0.5);             width: 30px;         }         &:after {             transform: rotate(-45deg);             bottom: -10px;             height: 2px;             background: rgba(255,255,255,0.5);             width: 30px;         }     } } 

then in jquery

$('.hamburger-icon').on('click', function(){    $(this).addclass('active');  }); 

hope got point.

good luck'