Animace při zobrazení navigace

sass/style.scss

@@ -6,7 +6,6 @@
 $header-width: 1560px;
 $main-width: 1024px;
 
-.visible { display: initial; }
 
 body {
 	margin: 0;
@@ -24,13 +23,20 @@ body {
 }
 
 nav {
-	display: none;
 	position: fixed;
-	left: 0;
+	top: 0;
 	right: 0;
-	width: 100%;
+	width: 0;
 	height: 100vh;
+	overflow: hidden;
 	text-align: right;
+	opacity: 0;
+	transition: opacity .3s;
+
+	&.visible {
+		width: 100%;
+		opacity: 1;
+	}
 
 	a { color: #fff; }
 
@@ -38,7 +44,7 @@ nav {
 	li { margin: 2em 0; }
 
 	div.background {
-		position: fixed;
+		position: absolute;
 		top: 0;
 		right: 0;
 		width: 30vw;