From 544d2eb20edbf09f796a01c46988adc3a8e34a99 Mon Sep 17 00:00:00 2001
From: Martijn Cuppens <martijn.cuppens@gmail.com>
Date: Wed, 19 Sep 2018 19:33:00 +0200
Subject: [PATCH] Carousel control transition

---
 scss/_carousel.scss  | 5 ++---
 scss/_variables.scss | 2 ++
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index 97e792ea722d..d2edad22882f 100644
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -121,15 +121,14 @@
   color: $carousel-control-color;
   text-align: center;
   opacity: $carousel-control-opacity;
-  // We can't have a transition here because WebKit cancels the carousel
-  // animation if you trip this while in the middle of another animation.
+  @include transition($carousel-control-transition);
 
   // Hover/focus state
   @include hover-focus {
     color: $carousel-control-color;
     text-decoration: none;
     outline: 0;
-    opacity: .9;
+    opacity: $carousel-control-hover-opacity;
   }
 }
 .carousel-control-prev {
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 9ac52e3d3201..78574bcfeeff 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -959,6 +959,8 @@ $breadcrumb-border-radius:          $border-radius !default;
 $carousel-control-color:             $white !default;
 $carousel-control-width:             15% !default;
 $carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
 
 $carousel-indicator-width:           30px !default;
 $carousel-indicator-height:          3px !default;