Add intro animation to transactions on homepage - Adjust animation values for better performance

apps/explorer_web/assets/css/components/_animations.scss

@@ -3,7 +3,7 @@
   100% {opacity: 1;}
 }
 
-@keyframes fade-up {
+@keyframes fade-up-blocks-homepage {
   0% {
     flex-basis: 0%;
     width: 0%;
@@ -23,13 +23,36 @@
   }
 }
 
+@keyframes fade-up {
+  0% {
+    height: 0;
+    opacity: 0;
+  }
+  25% {
+    opacity: 0;
+    transform: translateY(10px) scale(0.97);
+  }
+  50% {
+    height: 98px;
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0) scale(1);
+  }
+}
+
 .fade-in {
   animation: fade-in 1s ease-out forwards;
 }
 
+.fade-up-blocks-homepage {
+  will-change: transform, opacity, width;
+  max-height: 98px;
+  animation: fade-up-blocks-homepage 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+}
 
 .fade-up {
-  will-change: transform, opacity, width;
+  will-change: transform, opacity, height;
   max-height: 98px;
-  animation: fade-up 0.55s cubic-bezier(0.455, 0.03, 0.515, 0.955);
+  animation: fade-up 0.6s cubic-bezier(0.455, 0.03, 0.515, 0.955);
 }

apps/explorer_web/lib/explorer_web/templates/chain/_block.html.eex

@@ -1,4 +1,4 @@
-<div class="col-sm-3 fade-up" data-selector="chain-block" data-block-number="<%= @block.number %>">
+<div class="col-sm-3 fade-up-blocks-homepage" data-selector="chain-block" data-block-number="<%= @block.number %>">
   <div class="tile d-flex flex-column">
     <%= link(@block, to: block_path(ExplorerWeb.Endpoint, :show, @locale, @block), class: "tile-title") %>
     <div>

apps/explorer_web/lib/explorer_web/templates/chain/show.html.eex

@@ -63,7 +63,8 @@
       </div>
     </div>
   </div>
-  <div class="card">
+  <!-- We hardcoded the height on this element to keep the page from bouncing during the intro animation. -->
+  <div class="card" style="height: 694px;">
     <div class="card-body">
       <div data-selector="channel-batching-message" style="display:none;">
         <div data-selector="reload-button" class="alert alert-info">

apps/explorer_web/lib/explorer_web/templates/transaction/_tile.html.eex

@@ -1,4 +1,4 @@
-<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %>" data-test="<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
+<div class="tile tile-type-<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %> tile-status--<%= ExplorerWeb.TransactionView.status(@transaction) %> fade-up" data-test="<%= ExplorerWeb.TransactionView.type_suffix(@transaction) %>" data-transaction-hash="<%= @transaction.hash %>">
   <div class="row" data-test="chain_transaction">
     <div class="pl-5 col-md-2 d-flex flex-column align-items-left justify-content-start justify-content-lg-center">
       <span class="tile-label" data-test="transaction_type"> <%= ExplorerWeb.TransactionView.transaction_display_type(@transaction) %></span>