Sick animations

src/app/pay/pay.component.css

@@ -4,7 +4,7 @@
     left: 0;
     width: 100vw;
     height: 100vh;
-    background-color: #F7A12F;
+    background-color: #f7a12f;
     z-index: -999;
 }
 
@@ -16,11 +16,67 @@
     width: 50vw;
 
     /* Shadow */
-    box-shadow:
+    /* box-shadow: 1px 1px 112px 23px rgba(0,0,0,0.75); */
-        0 -0.5px 2.8px -9px rgba(0, 0, 0, 0.39)
-    ;
 }
 
 .content * {
     width: 100%;
 }
+
+.cube {
+    position: absolute;
+    top: 80vh;
+    left: 45vw;
+    width: 10px;
+    height: 10px;
+    border: solid 1px #df8919;
+    transform-origin: top left;
+    transform: scale(0) rotate(0deg) translate(-50%, -50%);
+    animation: cube 12s ease-in forwards infinite;
+}
+.cube:nth-child(2n) {
+    border-color: #d17600;
+}
+.cube:nth-child(2) {
+    animation-delay: 2s;
+    left: 25vw;
+    top: 10vh;
+}
+.cube:nth-child(3) {
+    animation-delay: 4s;
+    left: 5vw;
+    top: 80vh;
+}
+.cube:nth-child(4) {
+    animation-delay: 6s;
+    left: 90vw;
+    top: 5vh;
+}
+.cube:nth-child(5) {
+    animation-delay: 8s;
+    left: 10vw;
+    top: 95vh;
+}
+.cube:nth-child(6) {
+    animation-delay: 10s;
+    left: 50vw;
+    top: 10vh;
+}
+
+@keyframes cube {
+    0% {
+        transform: scale(0) rotate(0deg);
+        transform-origin: center;
+        filter: blur(0);
+        opacity: 1;
+    }
+    90% {
+        filter: blur(0);
+    }
+    100% {
+        transform: scale(5) rotate(960deg);
+        transform-origin: center;
+        filter: blur(5px);
+        opacity: 0;
+    }
+}

src/app/pay/pay.component.html

@@ -1,4 +1,11 @@
-<div class="bg"></div>
+<div class="bg">
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+    <div class="cube"></div>
+</div>
 <div class="content">
     <app-header></app-header>
     <app-payment></app-payment>

src/app/payment/payment.component.css

@@ -26,10 +26,15 @@
     height: 64px;
     width: 64px;
     transform: translate(96px, 96px);
+    animation: coinRoll 1s ease;
     z-index: 2;
 }
 
-.qrWrapper {
+@keyframes coinRoll {
+    0% {
+        transform: translateY(96px) rotate(-45deg) scale(0.5);
+        opacity: 0.7;
+    }
 }
 
 .payment * {