Final_result for submission

Exercises/exe_5/ques_2/css-motions.html

@@ -38,21 +38,26 @@
     .translate:hover {
       /* Q1: Move 60px right and 20px down */
       /* transform: ________; */
+      transform: translateX(60px) translateY(20px);
     }
 
     .rotate:hover {
       /* Q2: Rotate 45 degrees clockwise */
       /* transform: ________; */
+
+      transform: rotate(45deg);
     }
 
     .scale:hover {
       /* Q3: Make 1.5x bigger */
       /* transform: ________; */
+      transform: scale(1.5);
     }
 
     .skew:hover {
       /* Q4: Tilt 20deg horizontally */
       /* transform: ________; */
+      transform: skewX(20deg);
     }
 
     /* =========================================================
@@ -62,32 +67,41 @@
       background: tomato;
       /* Q5: Add transition to change background smoothly (2s) */
       /* transition: ________; */
+      transition-duration: 2s;
     }
 
     .colorTransition:hover {
       /* Q6: Change background color to lightgreen */
       /* background: ________; */
+      background:lightgreen ;
     }
 
     .moveTransition {
       /* Q7: Smoothly move right and rotate using transition */
       /* transition: ________; */
+      transform: translateX(100%) rotate(360deg);
+      transition-timing-function: ease-in-out;
+      transition-duration: 4s;
     }
 
     .moveTransition:hover {
       /* Q8: Use transform to move 100px right + rotate 30deg */
       /* transform: ________; */
+      transform: translateX(100px) rotate(30deg);
     }
 
     .timing {
       background: gold;
       /* Q9: Apply a 2s transition with ease-in-out */
       /* transition: ________; */
+      transition-duration: 2s;
+      transition-timing-function: ease-in-out;
     }
 
     .timing:hover {
       /* Q10: Increase width to 200px */
       /* width: ________; */
+      width:200px;
     }
 
     /* =========================================================
@@ -96,89 +110,162 @@
     .bounce {
       /* Q11: Add animation called "bounceBox" lasting 2s infinitely */
       /* animation: ________; */
+      animation-name: bounceBox;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
     }
 
     /* Q12: Define bounce movement (up & down using translateY) */
     @keyframes bounceBox {
       0% { transform: translateY(0); }
-      50% {  }
-      100% {  }
+      50% {  transform: translateY(-50px);}
+      100% {  transform: translateY(50px);}
     }
 
     .colorLoop {
       /* Q13: Animate color change in 4s infinitely */
       /* animation: ________; */
+      animation-name: colorLoop;
+      animation-duration: 4s;
+      animation-iteration-count: infinite;
     }
 
     /* Q14: Color transition sequence red → orange → yellow → green → blue */
     @keyframes colorLoop {
-
+        0%{
+          background-color: red;
+        }
+        20%{
+          background-color: orange;
+        }
+        40%{
+          background-color: yellow;
+        }
+        60%{
+          background-color: green;
+        }
+        80%{
+          background-color:blue;
+        }
     }
 
     .rotateMove {
       background: skyblue;
       /* Q15: Animate "rotateMove" (3s, infinite, ease-in-out) */
       /* animation: ________; */
+      animation-name: rotateMove;
+      animation-duration: 3s;
+      animation-iteration-count: infinite;
+      animation-timing-function: ease-in-out;
     }
 
     /* Q16: Move 150px right + rotate 360deg */
     @keyframes rotateMove {
-
+        100%{
+          transform: translateX(150px) rotate(360deg);
+        }
     }
 
     .fadeGrow {
       background: lightgreen;
       /* Q17: Animate "fadeGrow" for 3s only once */
       /* animation: ________; */
+      animation-name: fadeGrow;
+      animation-duration: 3s;
+      animation-iteration-count: 1;
     }
 
     /* Q18: Fade in + grow using opacity and scale */
-    @keyframes fadeGrow {
+    @keyframes fadeGrow { 
+        0%{
+          opacity:0;
+        }
+        100%{
+          opacity: 1;
+          transform: scale(100%);
+        }
 
     }
 
     .delay {
       background: violet;
       /* Q19: Animate color fade (3s) with 2s delay */
       /* animation: ________; */
+      animation-name: fadeColor;
+      animation-duration: 3s;
+      animation-delay: 2s;
     }
 
     /* Q20: Violet → cyan fade */
     @keyframes fadeColor {
-
+      0%{
+        background-color: violet;
+      }
+      100%{
+        background-color: cyan;
+        opacity:0.2;
+      }
     }
 
     .alternate {
       background: orange;
       /* Q21: Animate slide (2s, infinite, alternate direction) */
       /* animation: ________; */
+      animation-name: slide;
+      animation-duration: 2s;
+      animation-iteration-count: infinite;
+      animation-direction: alternate;
     }
 
     /* Q22: Move left → right → left */
     @keyframes slide {
-
+      0%{
+        left:0%;
+      }
+      50%{
+        left:100%;
+      }
+      100%{
+        left:0%;
+      }
     }
 
     .fillMode {
       background: salmon;
       /* Q23: Animate stretch (2s, once, forwards) */
       /* animation: ________; */
+      animation-name: stretch;
+      animation-duration: 2s;
+      animation-iteration-count: 1;
+      animation-fill-mode: forwards;
     }
 
     /* Q24: Stretch width from 100px → 200px */
     @keyframes stretch {
-
+      0%{
+        width:100px;
+      }
+      100%{
+        width:200px;
+      }
     }
 
     .combo {
       background: lightblue;
       /* Q25: Animate multiple properties: move, rotate, color (5s, infinite) */
       /* animation: ________; */
+      animation-name: combo;
+      animation-duration: 5s;
+      animation-iteration-count: infinite;
     }
 
     /* Q26: Combine movement + rotation + color change */
     @keyframes combo {
-
+
+        100%{
+          transform: translate(100px) rotate(360deg);
+          background-color: red;
+        }
     }
   </style>
 </head>
@@ -215,3 +302,6 @@ <h2>Part 3: Animations</h2>
 </body>
 
 </html>
+
+
+