diff --git a/scss/_nav.scss b/scss/_nav.scss
index 81eec4ed3fee..e71f6839e22e 100644
--- a/scss/_nav.scss
+++ b/scss/_nav.scss
@@ -15,6 +15,7 @@
   display: block;
   padding: $nav-link-padding-y $nav-link-padding-x;
   text-decoration: if($link-decoration == none, null, none);
+  @include transition($nav-link-transition);
 
   &:hover,
   &:focus {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 638945eb22d7..66f7357b0f04 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -803,6 +803,7 @@ $zindex-tooltip:                    1070 !default;
 
 $nav-link-padding-y:                .5rem !default;
 $nav-link-padding-x:                1rem !default;
+$nav-link-transition:               color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out !default;
 $nav-link-disabled-color:           $gray-600 !default;
 
 $nav-tabs-border-color:             $gray-300 !default;