diff --git a/src/styles/mixins.scss b/src/styles/mixins.scss
index 24c959c93..8e1fd4e16 100644
--- a/src/styles/mixins.scss
+++ b/src/styles/mixins.scss
@@ -58,3 +58,24 @@
   overflow: hidden;
   text-overflow: ellipsis;
 }
+
+// Usage example: @include default-transition(height, opacity, transform);
+// Result of use: transition: height 200ms cubic-bezier(0, 0, 0.2, 1) 0s , opacity 200ms cubic-bezier(0, 0, 0.2, 1) 0s , transform 200ms cubic-bezier(0, 0, 0.2, 1) 0s , -webkit-transform 200ms cubic-bezier(0, 0, 0.2, 1) 0s;
+@mixin default-transition($args...) {
+  $type: nth($args, length($args));
+  $props: $args;
+  $result: ();
+
+  @for $i from 1 through length($props) {
+    $anim: length($args);
+    $prop: nth($props, $i);
+    $result: append($result, $prop);
+    $result: append($result, unquote($string: 200ms $default-animation 0s));
+
+    @if $i != length($props) {
+      $result: append($result, unquote($string: ","));
+    }
+  }
+
+  transition: $result;
+}