From f135a79e4ee5aefbdcad5b2c34169000ad6402fe Mon Sep 17 00:00:00 2001
From: jindaliiita <jindaliiita@gmail.com>
Date: Fri, 7 Apr 2023 00:08:06 +0530
Subject: [PATCH] Issue #178 Animation effect added (#185)

Co-authored-by: piyushjindal <piyushjindal@adobe.com>
---
 blocks/hero-home/hero-home.css  |  1 +
 blocks/hero-home/hero-home.less |  1 +
 styles/styles.css               | 11 +++++++++++
 styles/styles.less              | 12 ++++++++++++
 4 files changed, 25 insertions(+)

diff --git a/blocks/hero-home/hero-home.css b/blocks/hero-home/hero-home.css
index 7cdc6a7..44b1895 100644
--- a/blocks/hero-home/hero-home.css
+++ b/blocks/hero-home/hero-home.css
@@ -26,6 +26,7 @@ main .hero-home > div > div > h1 {
   height: auto;
   box-sizing: border-box;
   line-height: 40px;
+  animation: moveUp 1s ease-in-out;
 }
 @media (min-width: 900px) {
   main .hero-home > div > div > h1 {
diff --git a/blocks/hero-home/hero-home.less b/blocks/hero-home/hero-home.less
index 03f1585..cb4a9b6 100644
--- a/blocks/hero-home/hero-home.less
+++ b/blocks/hero-home/hero-home.less
@@ -37,6 +37,7 @@ main {
 					height: auto;
 					box-sizing: border-box;
 					line-height: @font-lineheight-h2;
+					animation: moveUp 1s ease-in-out;
 				}
 			}
 		}
diff --git a/styles/styles.css b/styles/styles.css
index f353041..2e9041d 100644
--- a/styles/styles.css
+++ b/styles/styles.css
@@ -432,8 +432,19 @@ hr {
   border: 0;
   border-bottom: 1px solid var(--overlay-background-color);
 }
+@keyframes moveUp {
+  from {
+    transform: translateY(30%);
+  }
+  to {
+    transform: translateY(0);
+    opacity: 1;
+  }
+}
 main .home-banner.section {
   padding: 24px 10px 0 10px;
+  animation: moveUp 2s ease-in-out 0.5s forwards;
+  opacity: 0;
 }
 main .home-banner.section .default-content-wrapper {
   background-color: #fafafa;
diff --git a/styles/styles.less b/styles/styles.less
index 7792d11..8d83cb4 100644
--- a/styles/styles.less
+++ b/styles/styles.less
@@ -561,8 +561,20 @@ hr {
 	border-bottom: 1px solid var(--overlay-background-color);
 }
 
+@keyframes moveUp {
+	from {
+	  transform: translateY(30%);
+	}
+	to {
+	  transform: translateY(0);
+	  opacity: 1;
+	}
+}
+
 main .home-banner.section {
 	padding: 24px 10px 0 10px;
+	animation: moveUp 2s ease-in-out 0.5s forwards;
+	opacity: 0;
 
 	.default-content-wrapper {
 		background-color: @dotcoza-color-neutrals-grey-background;