Cloud animation lol

index.html

@@ -180,15 +180,8 @@
             */
 
             .fadeIn{
-                animation-name: fadeIn;
-                -webkit-animation-name: fadeIn;
-
-                animation-duration: 1.5s;
-                -webkit-animation-duration: 1.5s;
-
-                animation-timing-function: ease-in-out;
-                -webkit-animation-timing-function: ease-in-out;
-
+                animation: fadeIn 1.5s ease-in-out 0s, floating 1.5s 2s infinite;
+                -webkit-animation: fadeIn 1.5s ease-in-out 0s, floating 1.5s 1.5s infinite;
                 visibility: visible !important;
             }
 
@@ -229,7 +222,29 @@
             }
 
 
+            @keyframes floating {
+                0% {
+                    transform:  scale(0.17) translateY(0%);
+                }
+                50% {
+                    transform: scale(0.17) translateY(8%);
+                }
+                100% {
+                    transform:  scale(0.17) translateY(0%);
+                }
+            }
 
+            @-webkit-keyframes floating {
+                0% {
+                    -webkit-transform:  scale(0.17) translateY(0%);
+                }
+                50% {
+                    -webkit-transform: scale(0.17) translateY(8%);
+                }
+                100% {
+                    -webkit-transform: scale(0.17) translateY(0%);
+                }
+            }
 
           </style>
       </head>
@@ -265,9 +280,9 @@
         <div id="right-side" style="text-indent: 0.5rem; text-top: 1rem;">
             <div style="float:left; width:24%; margin-top:-8px;">
                 <img style="float:left" height="100%" width="100%" src="data:image/png;base64,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621pyenMuCfY0tfn+9KSTb363/Rs+5mMCQAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAj6WFrASr4+35eWrOZyvS0tecqMewKYlAkAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBvgcA4Chm+z6L2fYzGRMAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEEfSwtYyeV6W1pyOjPuCWBSJgAAECQAACBIAABAkAAAgCAfAgQ4iq/P96Ulm3r1g72z7WcyJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgKCPpQWs5OvzfWnJai7X29KSp8y4J4BJmQAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACPJzwABHMdvPWs+2n8mYAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAEPSxtICVzPg72TPuCWBSJgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBAgAAggQAAAQJAAAIEgAAECQAACBIAABAkAAAgCABAABBH0sLgLe3t8v1trQE4ExMAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABAkAAAgSAAAQJAAAIAgAQAAQQIAAIIEAAAECQAACBIAABD0vrRgd5frbWkJAEzn63PVM9oEAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAECQAACAIAEAAEECAACCBAAABAkAAAgSAAAQJAAAIEgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHNx/ARXdb82H7YErAAAAAElFTkSuQmCC">
-                <div id="cl-one" class="cloud fadeIn"><span class="shadow"></span></div>
-                <div id="cl-two" class="cloud fadeIn"><span class="shadow"></span></div>
-                <div id="cl-three" class="cloud fadeIn"><span class="shadow"></span></div>
+                <div id="cl-one" class="cloud fadeIn floating"><span class="shadow"></span></div>
+                <div id="cl-two" class="cloud fadeIn floating"><span class="shadow"></span></div>
+                <div id="cl-three" class="cloud fadeIn floating"><span class="shadow"></span></div>
             </div>
             <div style="float:left; width:76%">