From 6900263c525350b03fbda3601754cb99e71befb0 Mon Sep 17 00:00:00 2001
From: Valentin Popov <info@valentineus.link>
Date: Fri, 7 Dec 2018 01:07:26 +0400
Subject: [PATCH] feat(css): Added navigation bar animation

Signed-off-by: Valentin Popov <info@valentineus.link>
---
 _scss/components/_navigation.scss | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/_scss/components/_navigation.scss b/_scss/components/_navigation.scss
index 652da46..3943f51 100644
--- a/_scss/components/_navigation.scss
+++ b/_scss/components/_navigation.scss
@@ -23,6 +23,7 @@
   text-align: center;
   text-decoration: none;
 
+  &:active,
   &:focus,
   &:hover {
     border: 0;
@@ -34,6 +35,25 @@
   float: right;
 }
 
+@media(min-width: 382px) {
+  .nav-pills {
+    li {
+      display: inline-block;
+      transform: perspective(1px) translateZ(0);
+      transition-duration: .3s;
+      transition-property: transform;
+      transition-timing-function: ease-out;
+      vertical-align: middle;
+
+      &:active,
+      &:focus,
+      &:hover {
+        transform: translateY(8px);
+      }
+    }
+  }
+}
+
 @media (max-width: 382px) {
   .nav-right,
   .nav-pills li {