diff --git a/src/styl/carousel/carousel.styl b/src/styl/carousel/carousel.styl
index 2e8f42a..df984f3 100644
--- a/src/styl/carousel/carousel.styl
+++ b/src/styl/carousel/carousel.styl
@@ -39,20 +39,9 @@
             z-index: 1;
         }
     }
-    &.carousel-animate-none {
-        transition: none;
-        & > div {
-            transition: none;
-        }
-    }
-    &.carousel-animate-slide {
-        & > div {
-            transition: transform 0.5s;
-        }
-    }
     &.carousel-animate-fade {
         & > div {
-            transition: opacity 0.5s;
+            transition: transform 0.5s, opacity 0.5s;
             opacity: 0;
             &.carousel-selected {
                 opacity: 1;
diff --git a/test/html/index.html b/test/html/index.html
index e19ce07..d6cbee9 100644
--- a/test/html/index.html
+++ b/test/html/index.html
@@ -368,7 +368,7 @@ <h3>Drawer</h3>
                 <h3>Carousel</h3>
                 <button id="clickCarouselBack" class="button">Back</button>
                 <button id="clickCarouselNext" class="button">Next</button>
-                <div class="carousel carousel-animate-none" style="background-color: black">
+                <div class="carousel carousel-animate-fade" style="background-color: black">
                     <div class="carousel-selected" style="background-color: red; padding: 10px;">
                         Content 0
                         <br /><input type="text" />