Add nav dropdown animation
parent
10739b4764
commit
1b993e1b95
|
@ -86,6 +86,7 @@
|
||||||
position: relative;
|
position: relative;
|
||||||
&:hover {
|
&:hover {
|
||||||
.navbar-dropdown {
|
.navbar-dropdown {
|
||||||
|
animation: dropdownFade .2s cubic-bezier(.09, 0, .99, .01) both;
|
||||||
display: block;
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -114,7 +115,7 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
ul {
|
ul {
|
||||||
@include arrow('bottom', $blackish, $blackish, 1, 12);
|
@include arrow('bottom', $blackish, $blackish, 1, 8);
|
||||||
margin: 0;
|
margin: 0;
|
||||||
margin-bottom: .5rem;
|
margin-bottom: .5rem;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
|
@ -145,6 +146,14 @@
|
||||||
// Generated with Bounce.js. Edit at http://goo.gl/yZlDYR
|
// Generated with Bounce.js. Edit at http://goo.gl/yZlDYR
|
||||||
|
|
||||||
@keyframes dropdownFade {
|
@keyframes dropdownFade {
|
||||||
0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); }
|
0% {
|
||||||
100% { opacity: 0; transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, -400, 0, 0, 1); }
|
opacity: 0;
|
||||||
|
transform: translateY(-.25rem);
|
||||||
|
}
|
||||||
|
60% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
Loading…
Reference in New Issue