diff --git a/src/transitions/FadeTransition.tsx b/src/transitions/FadeTransition.tsx
new file mode 100644
index 00000000..50dc2113
--- /dev/null
+++ b/src/transitions/FadeTransition.tsx
@@ -0,0 +1,23 @@
+import { Transition } from 'react-transition-group';
+import { FadeTransitionProps } from './FadeTransition.types';
+import { getTransitionStyle, transitionTypes } from './TransitionStyles';
+
+export function FadeTransition(props: FadeTransitionProps): JSX.Element
+{
+    const { inProp = false, timeout = 300 } = props;
+
+    const style = getTransitionStyle('ease-in-out', timeout);
+
+    return (
+        <Transition in={ inProp } timeout={ timeout }>
+            {state => (
+                <div style={{
+                    ...style,
+                    ...transitionTypes[state]
+                }}>
+                    { props.children }
+                </div>
+            )}
+        </Transition>
+    );
+}
diff --git a/src/transitions/FadeTransition.types.ts b/src/transitions/FadeTransition.types.ts
new file mode 100644
index 00000000..6a9ad9a3
--- /dev/null
+++ b/src/transitions/FadeTransition.types.ts
@@ -0,0 +1,8 @@
+import { ReactNode } from 'react';
+
+export interface FadeTransitionProps
+{
+    inProp: boolean;
+    timeout?: number;
+    children?: ReactNode
+}
diff --git a/src/transitions/TransitionStyles.ts b/src/transitions/TransitionStyles.ts
new file mode 100644
index 00000000..3b7bc1b6
--- /dev/null
+++ b/src/transitions/TransitionStyles.ts
@@ -0,0 +1,18 @@
+export const transitionTypes = {
+    entering: { opacity: 1 },
+    entered: { opacity: 1 },
+    exiting: { opacity: 0 },
+    exited: { opacity: 0 },
+};
+
+export function getTransitionStyle(type: string, timeout: number = 300): Partial<CSSStyleDeclaration>
+{
+    switch(type)
+    {
+        case 'ease-in-out':
+            return {
+                transition: `opacity ${ timeout }ms ease-in-out`,
+                opacity: '0'
+            }
+    }
+}