All the ways provided in the link in comment are great. but there is also a way not described there, the same as bootstrap is using too. The preference of this method is because it is pure CSS animatable.
<div class="menu-icon">
<span class="line"></span>
<span class="line"></span>
<span class="line"></span>
</div>
.menu-icon > .line {
background-color: #292929;
height: 2px;
display: block;
}
.menu-icon > .line + .line {
margin-top: 8px;
}