Added animations to the home page

index.css

@@ -6,6 +6,7 @@ body {
     color: #000;
     margin: 0;
     padding: 0;
+    transition: background-color 0.3s ease-in-out;
 }
 
 .info>div {
@@ -19,6 +20,7 @@ body {
     background-color: #e7eefb;
 
     margin-right: 15px;
+    transition: background-color 0.3s ease-in-out;
 }
 
 .dropdown-item {
@@ -37,6 +39,7 @@ body {
     padding: 6px;
     border: none;
     background-color: transparent;
+    transition: border 0.3s ease-in-out;
 }
 
 #input_data:focus {
@@ -113,7 +116,7 @@ body {
     margin-bottom: 20px;
     margin-left: 0px;
     margin-right: 20px;
-
+    animation: fade-in 1s ease-in-out;
 }
 
 #category-grid .card {
@@ -138,6 +141,7 @@ body {
     width: 330px;
     border-radius: 20px;
     object-fit: fill;
+    transition: transform 0.3s ease-in-out;
 }
 
 #category-grid .cartbtn {
@@ -155,6 +159,7 @@ body {
     background-color: #f1dede;
     margin-left: 5px;
     margin-bottom: 8px;
+    transition: background-color 0.3s ease-in-out;
 
 }
 
@@ -170,8 +175,7 @@ body {
     height: 100%;
     object-fit: cover;
     transition: transform 0.3s ease 0.1s, width 2s, height 2.5s;
-
-
+    animation: zoomIn 1s ease-in-out;
 }
 
 
@@ -679,3 +683,20 @@ html {
 
 }
 
+@keyframes fade-in {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}
+
+@keyframes zoomIn {
+    from {
+        transform: scale(0.8);
+    }
+    to {
+        transform: scale(1);
+    }
+}