Stwosch Stwosch - 1 month ago 7
Sass (Sass) Question

hamburger menu position of span's in animate

I want to make hamburger menu icon and my problem is I want animate middle span to right side, I don't know how to do it.

HTML:

<div class="container">
<span></span>
<span></span>
<span></span>
</div>


CSS:

.container {
position:absolute;
right: 15%;
top: 10%;
}

span {
display: block;
border: 3px solid black;
margin: 5px 0;
width: 40px;
}

.container:hover span:nth-child(2) {
animation: animation 1s forwards;
}

@keyframes animation {
to { width: 20px; }
}


Example : https://jsfiddle.net/msds3c4j/

Answer

You can do

@keyframes animation {
  to { 
    width: 20px; 
    margin-left: 20px;
  }
}

JSFiddle

Comments