Merge pull request #24 from abhinav-m22/animations

Added Fading Animations
Gaurav-Verma07 · May 26, 2023 · 247bd45 · 247bd45 · vercel · May 26, 2023
2 parents caaa200 + 6b5be9e
commit 247bd45
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/src/components/HomeOurValues/OurValues1.tsx b/src/components/HomeOurValues/OurValues1.tsx
@@ -7,22 +7,22 @@ function OurValues1() {
         <h1 className="values-heading">OUR VALUES</h1>
         <hr />
         <div className="values-box-1">
-          <div className="values-content">
+          <div className="values-content fade-in-image">
             <h1>Empowerment</h1>
             <hr />
             <p>
             We prioritize empowering individuals and communities to take control of their own lives and work towards positive change.
             </p>
           </div>
-          <div className="values-content">
+          <div className="values-content fade-in-image">
             <h1>Collaboration</h1>
             <hr />
             <p>
             Value of collaboration with other organizations and stakeholders to achieve shared goals and maximize impact is very important to us.
             </p>
           </div>
 
-          <div className="values-content">
+          <div className="values-content fade-in-image">
             <h1>Growth</h1>
             <hr />
             <p>

diff --git a/src/components/HomeOurValues/Values.css b/src/components/HomeOurValues/Values.css
@@ -75,3 +75,16 @@
     margin-left: 0rem;
   }
 }
+
+@keyframes fadeIn {
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 1;
+   }
+}
+
+.fade-in-image{
+  animation: fadeIn 2s;
+}