Re-add carousel control transition (#27277)

diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index a3259f4f57bbccc40d2d8f2662e3fa3c9d8259eb..9693b129ec7073bbe52307e720742b6f39de826f 100644 (file)
--- a/scss/_carousel.scss
+++ b/scss/_carousel.scss
@@ -116,15 +116,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 b9187fc3d5d6e3b134ee628a395e890d1f74f72e..0d6d6485827424a5e3f674185efc484a6ef29576 100644 (file)
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -965,6 +965,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;