diff --git a/src/scss/style.scss b/src/scss/style.scss
index f22e927..a55edff 100755
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -8,6 +8,7 @@
 @import 'utilities/contain';
 @import 'utilities/container';
 @import 'utilities/display';
+@import 'utilities/fade-in-out';
 @import 'utilities/flexembed';
 @import 'utilities/font-sizes';
 @import 'utilities/hidden';
diff --git a/src/scss/utilities/_fade-in-out.scss b/src/scss/utilities/_fade-in-out.scss
new file mode 100644
index 0000000..5844c95
--- /dev/null
+++ b/src/scss/utilities/_fade-in-out.scss
@@ -0,0 +1,17 @@
+// FadeInOut extends
+@each $breakpoint in map-keys($global-breakpoints) {
+  @include break($breakpoint) {
+    $responsive-modifier: breakpoint-infix($breakpoint, $global-breakpoints);
+
+    %hide-for-fade-in#{$responsive-modifier} {
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 0.2s, visibility 0.2s;
+    }
+
+    %show-for-fade-in#{$responsive-modifier} {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
\ No newline at end of file