fluid layouts started

Natours/starter/sass/base/_animations.scss

@@ -0,0 +1,43 @@
+@keyframes slideLeft {
+    0% {
+        transform: translateX(-16rem);
+        opacity: 0;
+    }
+
+    80% {
+        transform: translateX(1.5rem);
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideRight {
+    0% {
+        transform: translateX(16rem);
+        opacity: 0;
+    }
+
+    80% {
+        transform: translateX(-1.5rem);
+    }
+
+    100% {
+        transform: translateX(0);
+        opacity: 1;
+    }
+}
+
+@keyframes slideBottom {
+    0% {
+        transform: translateY(5rem);
+        opacity: 0;
+    }
+
+    100% {
+        transform: translateY(0);
+        opacity: 1;
+    }
+}