Add compatibility with flex and animations for web browsers

Author: Lnleite

css/index.css

@@ -167,13 +167,25 @@ html.sr .load-hidden {
   z-index: 100;
 }
 .navigation .nav {
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;
   justify-content: flex-end;
   align-items: center;
   width: 100%;
   padding: 0px 5%;
 }
 .navigation .nav .hamburger {
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;
   flex-direction: column;
   align-items: flex-end;
@@ -206,6 +218,12 @@ html.sr .load-hidden {
   width: 40px;
 }
 .navigation .sideNav nav {
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;
   justify-content: center;
   align-items: center;
@@ -309,123 +327,155 @@ header .jumboTxt p {
 }
 .fishAnimation .jellyfish {
   top: 0;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 30s linear infinite alternate;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 30s 0s linear infinite reverse;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 30s 0s linear infinite reverse;
 }
 @media (max-width: 501px) {
   .fishAnimation .jellyfish {
-    animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s linear infinite alternate;
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite reverse;
+    animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite reverse;
   }
 }
 .fishAnimation .normFish2 {
   top: 40%;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 4s infinite normal;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
 }
 .fishAnimation .dolphin {
   top: 80%;
   width: 250px;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 5s infinite reverse;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 5s linear infinite reverse;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 5s linear infinite reverse;
 }
 @media (max-width: 501px) {
   .fishAnimation .dolphin {
-    animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 5s infinite reverse;
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 5s linear infinite reverse;
+    animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 5s linear infinite reverse;
   }
 }
 .fishAnimation .puffer {
   top: 0;
   width: 100px;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 7s linear infinite normal;
   animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 7s linear infinite normal;
   transform: scaleX(-1);
 }
 @media (max-width: 501px) {
   .fishAnimation .puffer {
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 7s linear infinite normal;
     animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 7s linear infinite normal;
   }
 }
 .fishAnimation .school {
   top: 20%;
   width: 250px;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s infinite normal;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
 }
 .fishAnimation .spiny {
   top: 50%;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 3s infinite reverse;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 2s linear infinite reverse;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 2s linear infinite reverse;
 }
 .fishAnimation .sword {
   top: 85%;
   width: 300px;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 2s linear infinite reverse;
   animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 2s linear infinite reverse;
   transform: rotate(-15deg);
 }
 @media (max-width: 501px) {
   .fishAnimation .sword {
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 2s linear infinite reverse;
     animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 2s linear infinite reverse;
   }
 }
 .fishAnimation .normFish3 {
   top: 0;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 5s linear infinite normal;
   animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 5s linear infinite normal;
 }
 @media (max-width: 501px) {
   .fishAnimation .normFish3 {
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 5s linear infinite normal;
     animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 5s linear infinite normal;
   }
 }
 .fishAnimation .seahorse {
   width: 90px;
   top: 70%;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 5s linear infinite reverse;
   animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 5s linear infinite reverse;
 }
 @media (max-width: 501px) {
   .fishAnimation .seahorse {
     top: 80%;
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 5s linear infinite reverse;
     animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 5s linear infinite reverse;
   }
 }
 .fishAnimation .shark {
   top: 0;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s linear infinite normal;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
   width: 330px;
   transform: scale(1.3);
 }
 @media (max-width: 501px) {
   .fishAnimation .shark {
     top: -5%;
     height: 410px;
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 9s 2s linear infinite normal;
     animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 9s 2s linear infinite normal;
   }
 }
 .fishAnimation .normFish {
   top: 20%;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s linear infinite normal;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite normal;
 }
 .fishAnimation .bass {
   top: 0;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s linear infinite reverse;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite reverse;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite reverse;
 }
 @media (max-width: 501px) {
   .fishAnimation .bass {
-    animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s linear infinite reverse;
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 0s linear infinite reverse;
+    animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 0s linear infinite reverse;
   }
 }
 .fishAnimation .norm {
   top: 10%;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 2s linear infinite normal;
   animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 2s linear infinite normal;
 }
 @media (max-width: 501px) {
   .fishAnimation .norm {
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 2s linear infinite normal;
     animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 2s linear infinite normal;
   }
 }
 .fishAnimation .whale {
   top: 80%;
-  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s linear infinite reverse;
+  -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite reverse;
+  animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 15s 0s linear infinite reverse;
   transform: scale(3) scaleX(-1);
 }
 @media (max-width: 501px) {
   .fishAnimation .whale {
+    -webkit-animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 4s linear infinite reverse;
     animation: SwimUpDown 1.5s infinite alternate, MoveOnScreen 7s 4s linear infinite reverse;
   }
 }
+@-webkit-keyframes SwimUpDown {
+  0% {
+    margin-top: 0;
+  }
+  100% {
+    margin-top: 25px;
+  }
+}
 @keyframes SwimUpDown {
   0% {
     margin-top: 0;
@@ -434,6 +484,16 @@ header .jumboTxt p {
     margin-top: 25px;
   }
 }
+@-webkit-keyframes MoveOnScreen {
+  0% {
+    opacity: 1;
+    margin-left: -70%;
+  }
+  100% {
+    margin-left: 120%;
+    opacity: 1;
+  }
+}
 @keyframes MoveOnScreen {
   0% {
     opacity: 1;
@@ -480,6 +540,12 @@ header .jumboTxt p {
 .home #projects .stage {
   list-style: none;
   padding: 0;
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;
   justify-content: space-around;
   flex-wrap: wrap;
@@ -520,6 +586,12 @@ header .jumboTxt p {
   background-size: cover;
   background-repeat: no-repeat;
   box-shadow: inset 0px 0px 40px rgba(255, 255, 255, 0);
+  display: -webkit-box;
+  /* OLD - iOS 6-, Safari 3.1-6, BB7 */
+  display: -ms-flexbox;
+  /* TWEENER - IE 10 */
+  display: -webkit-flex;
+  /* NEW - Safari 6.1+. iOS 7.1+, BB10 */
   display: flex;
   justify-content: center;
   align-items: center;