diff --git a/scss/_carousel.scss b/scss/_carousel.scss
index a3259f4f57..9693b129ec 100644
--- 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 b9187fc3d5..0d6d648582 100644
--- 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;