Merge pull request #56 from Shinchan3102/master

added animation on the home page
TheGuyDangerous · Oct 16, 2022 · 254f8e3 · 254f8e3
2 parents e4c57f4 + f702fda
commit 254f8e3
Show file tree

Hide file tree

Showing 2 changed files with 86 additions and 4 deletions.
diff --git a/Home.css b/Home.css
@@ -172,4 +172,86 @@
     height: 141px;
     margin: -456px -20px 60px auto;
   }
+}
+
+.ani-img{
+  animation: movedown 1s linear 1;
+  animation-delay: 0.5s;
+  visibility: hidden;
+  animation-fill-mode: forwards;
+}
+
+@keyframes movedown{
+  0%{
+    transform: translateY(-100px);
+    visibility: visible;
+  }
+  100%{
+    transform: translateY(0);
+    visibility: visible;
+  }
+}
+.log-img{
+  animation: moveleft 1s linear 1;
+  animation-delay: 2s;
+  visibility: hidden;
+  animation-fill-mode: forwards;
+}
+
+@keyframes moveleft{
+  0%{
+    transform: translateX(-200px);
+    visibility: visible;
+  }
+  100%{
+    transform: translateX(0);
+    visibility: visible;
+  }
+}
+.ani-content{
+  animation: zoomIn 1.2s linear 1;
+  animation-delay: 3.5s;
+  visibility: hidden;
+  animation-fill-mode: forwards;
+}
+
+@keyframes zoomIn{
+  0%{
+    transform: scale(0.4);
+    visibility: visible;
+  }
+  70%{
+    transform: scale(1.1);
+    visibility: visible;
+  }
+  100%{
+    transform: scale(1);
+    visibility: visible;
+  }
+}
+.ani-side{
+  animation: shake 0.2s linear 4;
+  animation-delay: 5.5s;
+}
+@keyframes shake{
+  0%{
+    transform: rotate(0deg);
+    box-shadow: 2px 2px 5px #00b4d95e;
+  }
+  25%{
+    transform: rotate(5deg);
+    box-shadow: 2px 2px 5px #2fdcff;
+  }
+  50%{
+    transform: rotate(0deg);
+    box-shadow: 2px 2px 5px #2fdcff;
+  }
+  75%{
+    transform: rotate(-5deg);
+    box-shadow: 2px 2px 5px #2fdcff;
+  }
+  100%{
+    transform: rotate(0);
+    box-shadow: 2px 2px 5px #2fdcff;
+  }
 }
diff --git a/index.html b/index.html
@@ -32,7 +32,7 @@
   </head>
   <body data-home-page="Home.html" data-home-page-title="Home" class="u-body"><header class="u-clearfix u-header u-header" id="sec-aeb5"><div class="u-clearfix u-sheet u-sheet-1">
         <a href="index.html" data-page-id="915512892" class="u-image u-logo u-image-1" data-image-width="3456" data-image-height="3408" title="Home">
-          <img src="images/Remini20211005111607851-removebg1.png" class="u-logo-image u-logo-image-1">
+          <img src="images/Remini20211005111607851-removebg1.png" class="u-logo-image u-logo-image-1 ani-img">
         </a>
         <nav class="u-menu u-menu-dropdown u-offcanvas u-menu-1">
           <div class="menu-collapse" style="font-size: 1rem; letter-spacing: 0px; font-weight: 500;">
@@ -66,14 +66,14 @@
     <section class="u-clearfix u-image u-section-1" id="carousel_b9b1" data-image-width="1620" data-image-height="1080">
       <div class="u-clearfix u-sheet u-sheet-1">
         <div class="u-align-left u-container-style u-group u-group-1">
-          <div class="u-container-layout u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xl u-container-layout-1">
+          <div class="u-container-layout u-valign-middle-lg u-valign-middle-md u-valign-middle-sm u-valign-middle-xl u-container-layout-1 ani-content">
             <h3 class="u-text u-text-default u-text-1">WELCOME TO</h3>
             <h1 class="u-custom-font u-font-roboto-condensed u-text u-text-2">Food coders</h1>
             <p class="u-text u-text-default u-text-3">A new way to find fascinating recipes</p>
-            <a href="Vegetarian.html" data-page-id="745226877" class="u-active-white u-border-1 u-border-active-white u-border-white u-border-hover-black u-btn u-button-style u-hover-black u-text-white u-none u-btn-1">Go To Recipes</a>
+            <a href="Vegetarian.html" data-page-id="745226877" class="u-active-white u-border-1 u-border-active-white u-border-white u-border-hover-black u-btn u-button-style u-hover-black u-text-white u-none u-btn-1 ani-side">Go To Recipes</a>
           </div>
         </div>
-        <img class="u-image u-image-default u-preserve-proportions u-image-1" src="https://i.postimg.cc/T1gYMDyb/Blue-Modern-Gear-Illustration-Technology-Logo-3-removebg-preview.png" alt="" data-image-width="800" data-image-height="800"
+        <img class="u-image u-image-default u-preserve-proportions u-image-1 log-img" src="https://i.postimg.cc/T1gYMDyb/Blue-Modern-Gear-Illustration-Technology-Logo-3-removebg-preview.png" alt="" data-image-width="800" data-image-height="800">
       </div>
     </section>
     <!-- slider  -->