diff --git a/res/css/_common.scss b/res/css/_common.scss
index a22d77f3d3..aafd6e5297 100644
--- a/res/css/_common.scss
+++ b/res/css/_common.scss
@@ -18,6 +18,8 @@ limitations under the License.
 
 @import "./_font-sizes.scss";
 
+$hover-transition: 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
+
 :root {
     font-size: 10px;
 }
diff --git a/res/css/views/settings/_AvatarSetting.scss b/res/css/views/settings/_AvatarSetting.scss
index 3576b09888..52a0ee95d7 100644
--- a/res/css/views/settings/_AvatarSetting.scss
+++ b/res/css/views/settings/_AvatarSetting.scss
@@ -21,7 +21,7 @@ limitations under the License.
     position: relative;
 
     .mx_AvatarSetting_hover {
-        transition: opacity 0.08s cubic-bezier(.46, .03, .52, .96); // quadratic
+        transition: opacity $hover-transition;
 
         // position to place the hover bg over the entire thing
         position: absolute;