Merge pull request #44 from iamHrithikRaj/animateCard

Add animation in cards
iamHrithikRaj · Jul 26, 2021 · 4a559a7 · 4a559a7
2 parents e4d0f45 + ed4882e
commit 4a559a7
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 13 deletions.
diff --git a/_includes/education.html b/_includes/education.html
@@ -1,16 +1,18 @@
 <h2 id="education" class="section-heading">Education</h2>
-<div class="container card-container card-container-education">
-    {% for item in site.data.education %}
-    <div class="card">
-      <div class="icon">
-        <img src="./assets/img/education/{{ item.logo }}">
+<div class="animated animatedFadeInUp fadeInUp">
+  <div class="container card-container card-container-education">
+      {% for item in site.data.education %}
+      <div class="card">
+        <div class="icon">
+          <img src="./assets/img/education/{{ item.logo }}">
+        </div>
+        <div class="info">
+          <p class="title">{{ item.course }}</p>
+          <p class="location">{{ item.institute }}</p>
+          <p class="dates">{{ item.dates }}</p>
+        </div>
       </div>
-      <div class="info">
-        <p class="title">{{ item.course }}</p>
-        <p class="location">{{ item.institute }}</p>
-        <p class="dates">{{ item.dates }}</p>
-      </div>
-    </div>
-    {% endfor %}
+      {% endfor %}
+  </div>
 </div>
 
diff --git a/_includes/projects.html b/_includes/projects.html
@@ -1,5 +1,6 @@
 <h2 id="projects" class="section-heading" >Projects</h2>
-<div class="container card-container">
+<div class="animated animatedFadeInUp fadeInUp">
+  <div class="container card-container">
     {% for item in site.data.projects %}
     <a href="#{{ item.modal-name }}">
       <div class="card">
@@ -17,3 +18,4 @@ <h2 id="projects" class="section-heading" >Projects</h2>
     </a>
     {% endfor %}
   </div>
+</div>
diff --git a/_sass/project.scss b/_sass/project.scss
@@ -12,4 +12,43 @@
 
 .container {
     padding: 0;
+}
+
+@keyframes fadeInUp {
+    from {
+        transform: translate3d(0,40px,0)
+    }
+
+    to {
+        transform: translate3d(0,0,0);
+        opacity: 1
+    }
+}
+
+@-webkit-keyframes fadeInUp {
+    from {
+        transform: translate3d(0,40px,0)
+    }
+
+    to {
+        transform: translate3d(0,0,0);
+        opacity: 1
+    }
+}
+
+.animated {
+    animation-duration: 1s;
+    animation-fill-mode: both;
+    -webkit-animation-duration: 1s;
+    -webkit-animation-fill-mode: both
+}
+
+.animatedFadeInUp {
+    opacity: 0
+}
+
+.fadeInUp {
+    opacity: 0;
+    animation-name: fadeInUp;
+    -webkit-animation-name: fadeInUp;
 }