Issue #178 Animation effect added (#185)

Co-authored-by: piyushjindal <[email protected]>
RoronoaSrinu · Apr 6, 2023 · f135a79 · f135a79
1 parent 1d05315
commit f135a79
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 0 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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;