Commit 34dc531a authored by alain's avatar alain 🐙
Browse files

speed up nav animation a bit

parent 61699ef4
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
align-items: center; align-items: center;
z-index: $z-header; z-index: $z-header;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1); box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
transition: all 0.25s ease; transition: all 0.2s ease;
body.admin-bar & { body.admin-bar & {
top: 45px; top: 45px;
......
...@@ -3,7 +3,6 @@ ...@@ -3,7 +3,6 @@
background: white; background: white;
top: 0; top: 0;
right: 0; right: 0;
transition: all 0.25s ease;
z-index: $z-nav; z-index: $z-nav;
// Hamburger menu styles // Hamburger menu styles
...@@ -14,11 +13,13 @@ ...@@ -14,11 +13,13 @@
opacity: 0; opacity: 0;
transform: translateX(100%); transform: translateX(100%);
visibility: hidden; visibility: hidden;
transition: all 0.1s ease;
&--shown { &--shown {
transform: translateX(0%); transform: translateX(0%);
opacity: 1; opacity: 1;
visibility: visible; visibility: visible;
transition: all 0.2s ease;
} }
} }
...@@ -173,7 +174,7 @@ ...@@ -173,7 +174,7 @@
outline: none; outline: none;
// flex: 1; // flex: 1;
padding: 10px; padding: 10px;
transition: all 0.25s ease; transition: all 0.2s ease;
z-index: $z-hamburger; z-index: $z-hamburger;
@media only screen and (min-width: $mediumlarge) { @media only screen and (min-width: $mediumlarge) {
...@@ -197,36 +198,36 @@ ...@@ -197,36 +198,36 @@
background: black; background: black;
content: " "; content: " ";
display: block; display: block;
transition: all 0.25s ease; transition: all 0.2s ease;
&:nth-child(1) { &:nth-child(1) {
transform: translateY(-5px); transform: translateY(-5px);
transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s; transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
} }
&:nth-child(2) { &:nth-child(2) {
transform: scaleX(1); transform: scaleX(1);
transition: transform 0.25s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.25s; transition: transform 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.25s;
} }
&:nth-child(3) { &:nth-child(3) {
transform: translateY(5px); transform: translateY(5px);
transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s; transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
} }
} }
&--active { &--active {
span:nth-child(1) { span:nth-child(1) {
transform: rotate(45deg); transform: rotate(45deg);
transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s; transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s;
} }
span:nth-child(2) { span:nth-child(2) {
transform: scaleX(0); transform: scaleX(0);
transition: transform 0.25s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s; transition: transform 0.2s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0s;
} }
span:nth-child(3) { span:nth-child(3) {
transform: rotate(-45deg); transform: rotate(-45deg);
transition: transform 0.4s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s; transition: transform 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6) 0.15s;
} }
} }
} }
\ No newline at end of file
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment