@keyframes bounce {
from, 20%, 53%, 80%, to {
animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
transform: translate3d(0,0,0);
}
40%, 43% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -30px, 0);
}
70% {
animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
transform: translate3d(0, -15px, 0);
}
90% {
transform: translate3d(0,-4px,0);
}
}
.bounce {
animation-name: bounce;
transform-origin: center bottom;
}$( document ).ready(function() {
console.log( "ready!" );
});
.btn:before {
content: '';
position: absolute;
background: black;
width: 50px;
height: 80px;
right: -30px;
bottom: 0px;
transform: skew(-20deg);
z-index: 5;
}
.btn {
position: relative;
width: 200px;
height: 80px;
background: black;
z-index: 10;
}
<menu class="main-menu">
<li class="main-menu__list"><a href="" class="main-menu__link"></a></li>
<li class="main-menu__list"><a href="" class="main-menu__link main-menu__link--active"></a></li>
<li class="main-menu__list"><a href="" class="main-menu__link"></a></li>
<li class="main-menu__list"><a href="" class="main-menu__link"></a></li>
</menu>