Animated brands section

resources/styles/main.css

@@ -26,10 +26,11 @@
   margin-top: 10px;
   display: inline-flex;
   flex-direction: row;
+  align-items: center;
 }
 .table .table-item img {
-  margin-right: 10px;
-  height: 100px;
+  margin-right: 100px;
+  height: auto;
   width: 100px;
 }
 .table .reverse {
@@ -37,19 +38,74 @@
 }
 .table .reverse img {
   margin-right: 0;
-  margin-left: 10px;
+  margin-left: 100px;
 }
 .table .reverse p {
   text-align: right;
 }
 .table .reverse .vertical-separator {
   margin-right: 0;
-  margin-left: 10px;
+  margin-left: 100px;
 }
 .table .vertical-separator {
   height: 120px;
   border: solid 1px #1d60b5;
-  margin-right: 10px;
+  margin-right: 100px;
+}
+.table .square img {
+  height: 100px;
+}
+.table .table-item-animation {
+  animation: slide-in-left 3000ms;
+}
+.table .table-item-animation-reverse {
+  animation: slide-in-right 3000ms;
+}
+@keyframes fade-in {
+  from {
+    margin-left: 10%;
+    width: 105%;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    width: 100%;
+    opacity: 1;
+  }
+}
+@keyframes fade-in-reverse {
+  from {
+    margin-right: 10%;
+    width: 105%;
+    opacity: 0;
+  }
+  to {
+    margin-right: 0;
+    width: 100%;
+    opacity: 1;
+  }
+}
+@keyframes slide-in-left {
+  from {
+    transform: translateX(-100%);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0%);
+    opacity: 1;
+  }
+}
+@keyframes slide-in-right {
+  from {
+    margin-left: 100%;
+    width: 300%;
+    opacity: 0;
+  }
+  to {
+    margin-left: 0;
+    width: 100%;
+    opacity: 1;
+  }
 }
 
 #header {