diff --git a/index.html b/index.html
index 67f2ab0..b136724 100644
--- a/index.html
+++ b/index.html
@@ -95,6 +95,19 @@
                 <div class="child elv-12"></div>
                 <div class="child elv-16"></div>
                 <div class="child elv-24"></div>
+                <div id="elv-transition" class="child elv-transition elv-1"></div>
+                <script>
+                    const elm = document.getElementById("elv-transition");
+                    setInterval(() => {
+                        if (elm.classList.contains("elv-1")) {
+                            elm.classList.remove("elv-1")
+                            elm.classList.add("elv-24");
+                        } else {
+                            elm.classList.remove("elv-24")
+                            elm.classList.add("elv-1");
+                        }
+                    }, 600);
+                </script>
             </div>
         </div>
 
diff --git a/package.json b/package.json
index 7f75a55..68ee58c 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,12 @@
 {
   "name": "@hibas123/theme",
-  "version": "1.1.2",
+  "version": "1.2.0",
   "description": "",
   "main": " ",
   "files": [
     "out/*.css",
-    "src/*"
+    "src/*",
+    "Roboto-Regular.woff2"
   ],
   "scripts": {
     "build": "sass src/base.scss:out/base.css src/dark.scss:out/dark.css src/light.scss:out/light.css",
diff --git a/src/_maketheme.scss b/src/_maketheme.scss
index fef1588..ef3e42d 100644
--- a/src/_maketheme.scss
+++ b/src/_maketheme.scss
@@ -24,6 +24,10 @@ $button-color: #CCCCCC !default;
     }
 }
 
+.elv-transition {
+    @include ElevationTransition();
+}
+
 
 @function darken-brighten-color($color, $val) {
     @if (lightness($color) > 50) {
diff --git a/src/dark.scss b/src/dark.scss
index 2b2fc6e..e15db0f 100644
--- a/src/dark.scss
+++ b/src/dark.scss
@@ -9,4 +9,8 @@ $disabled-brightness: 1.1;
     z-index: $dp;
 }
 
+@mixin ElevationTransition() {
+    transition: background .5s;
+}
+
 @import "./_maketheme.scss";
\ No newline at end of file
diff --git a/src/light.scss b/src/light.scss
index 7a12541..ac1d17f 100644
--- a/src/light.scss
+++ b/src/light.scss
@@ -54,4 +54,8 @@ $disabled-brightness: .9;
     z-index: $dp;
 }
 
+@mixin ElevationTransition() {
+    transition: box-shadow .5s;
+}
+
 @import "./_maketheme.scss";
\ No newline at end of file