css challenge -day2

burgerMenu.markdown

Burger Menu

A Pen by avicdro on CodePen.

License.

index.pug

.container
  .burger-menu
    .line.l1.no-animation
    .line.l2.no-animation
    .line.l3.no-animation

script.typescript

const active = document.getElementsByClassName("burger-menu")[0];
const anime = document.getElementsByClassName("line");

active.addEventListener("click", ()=>{
  active.classList.toggle("active");
  for(let i: int = 0; i<3 ; i++){
    anime[i].classList.remove("no-animation");      
  }
});

style.scss

.container {
  margin: 10% auto;
  display: grid;
  justify-items:center;
  align-content:center;
  width: 400px;
  height: 400px;
  border-radius: 5px;
  color:white;
  font-family: 'Open Sans', serif;
  ///gradient
  background: rgb(72,160,54); /* Old browsers */
  background: -moz-linear-gradient(-45deg, rgba(72,160,54,1) 1%, rgba(59,155,52,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg, rgba(72,160,54,1) 1%,rgba(59,155,52,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg, rgba(72,160,54,1) 1%,rgba(59,155,52,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48a036', endColorstr='#3b9b34',GradientType=1 ); /* IE6-9 */
} 

.burger-menu {
  height:55px;
  cursor: pointer;
}
.line {
  width: 90px;
  height: 10px;
  background-color: white;
  border-radius: 5px;
  
}
.l1 {
  position: relative;
  top: 0px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);
  animation: anima-l1-re .7s ease-in-out forwards;
  }

.l2 {
  position: relative;
  top: 12px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);
  animation: anima-l2-re .6s ease-in-out forwards;
  }

.l3 {
  position: relative;
  top: 24px;
  box-shadow: 0 2px 10px 0 rgba(0,0,0,0.3);
  animation: anima-l3-re .7s ease-in-out forwards;

}
.active {
  .l1 {
    animation: anima-l1 .7s cubic-bezier(.08,1.41,.66,.97) forwards;
  }
  .l2 { 
    animation: anima-l2 .6s ease forwards;
  }
  .l3 {
    animation: anima-l3 .7s cubic-bezier(.08,1.41,.66,.97) forwards;
  }
}
.no-animation {
    -webkit-animation: none !important;
            animation: none !important;
}

@keyframes anima-l1 {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(22px) rotate(0deg);
  }
  100% {
    transform: translateY(22px) rotate(45deg);
  }
}
@keyframes anima-l2 {
  0%{ 
    transform: scale(1); 
    opacity: 1;
  }
  100%{
    transform: scale(0);
    opacity: 0;
  }
}
@keyframes anima-l3 {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-22px) rotate(0deg);
  }
  100% {
    transform: translateY(-22px) rotate(135deg);
  }
}

@keyframes anima-l1-re {
  0% {
    transform: translateY(22px) rotate(45deg);
  }
  50% {
    transform: translateY(22px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}
@keyframes anima-l2-re {
  0%{ 
    transform: scale(0); 
    opacity: 0;
  }
  100%{
    transform: scale(1);
    opacity: 1;
  }
}
@keyframes anima-l3-re {
  0% {
    transform: translateY(-22px) rotate(135deg);
  }
  50% {
    transform: translateY(-22px) rotate(0deg);
  }
  100% {
    transform: translateY(0px) rotate(0deg);
  }
}