From 72337142da1c29f5960c7f1d637bd0cfc6fa35f9 Mon Sep 17 00:00:00 2001
From: Fedor Katurov <gotham48@gmail.com>
Date: Thu, 24 Oct 2019 17:24:35 +0700
Subject: [PATCH] animated flow

---
 src/components/flow/FlowHero/styles.scss | 15 ++++++++++++++-
 1 file changed, 14 insertions(+), 1 deletion(-)

diff --git a/src/components/flow/FlowHero/styles.scss b/src/components/flow/FlowHero/styles.scss
index 2643864e..31e05817 100644
--- a/src/components/flow/FlowHero/styles.scss
+++ b/src/components/flow/FlowHero/styles.scss
@@ -1,9 +1,19 @@
+@keyframes rise {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(0, -10%);
+  }
+}
+
 .wrap {
   width: 100%;
   height: 100%;
   position: relative;
   background: $content_bg;
   border-radius: $cell_radius;
+  overflow: hidden;
 }
 
 .hero {
@@ -11,7 +21,7 @@
   top: 0;
   left: 0;
   width: 100%;
-  height: 100%;
+  height: 150%;
   display: none;
   transition: opacity 2s;
   background: 50% 50% no-repeat;
@@ -20,6 +30,7 @@
   z-index: 2;
   opacity: 0;
   cursor: pointer;
+  transform: translate(0, -10%);
 
   &::after {
     content: ' ';
@@ -46,6 +57,8 @@
   &.is_active {
     opacity: 1;
     z-index: 3;
+    will-change: transform;
+    animation: rise 5s forwards;
   }
 }