Merge pull request #132 from codeharborhub/dev-1

Started Project Practicals

Author: ajay-dhangar

docs/css/project-practicals/animation-practice.mdx

@@ -1 +1,98 @@
-<ComingSoon />
+---
+title: "CSS Animation Practice Projects"
+sidebar_label: Animation Practice
+description: "Hands-on CSS animation practice with real mini-projects, transitions, keyframes, micro-interactions, and modern UI animation patterns."
+keywords: [CSS animation practice, CSS transitions projects, CSS keyframes tutorial, CSS transforms practical, animated buttons, loading spinners, moving background]
+tags:
+  [
+    css,
+    animations,
+    transitions,
+    keyframes,
+    micro-interactions,
+    ui-design,
+    frontend,
+    beginner,
+    advanced,
+    practice,
+    codeharborhub,
+  ]
+---
+
+Animations are the secret ingredient that transforms a static webpage into an **engaging and memorable user experience**. This practical session is dedicated to solidifying your understanding of CSS **Transitions**, **Transforms**, and **Keyframe Animations** by applying them to real-world components.
+
+Before starting, ensure you are familiar with the concepts in the [Transitions and Animations](/tutorial/category/transitions--animations) section.
+
+<AdsComponent />
+<br />
+
+## Project 1: The Interactive 3D Button (Transforms & Transitions)
+
+This project focuses on combining CSS **Transforms** for 3D effects with **Transitions** for a smooth, interactive feel.
+
+### The Goal
+
+Create a button that appears to "press down" or "lift up" when hovered over.
+
+<CodePenEmbed 
+  title="The Interactive 3D Button (Transforms & Transitions)"
+  penId="emZxGLa"
+/>
+
+## Project 2: A Simple CSS Loading Spinner (Keyframes)
+
+A classic use of CSS animations is creating loading indicators. This project uses the fundamental **Keyframes** and the `animation` shorthand property.
+
+### The Goal
+
+Create a perpetually rotating, border-based loading spinner.
+
+<CodePenEmbed 
+  title="A Simple CSS Loading Spinner (Keyframes)"
+  penId="myPvBaM"
+/>
+
+## Project 3: Background Color Pulse Effect (Keyframes & Iteration Count)
+
+This project demonstrates how to use **Keyframes** for a subtle, repeating change, perfect for drawing attention to a new notification or a primary call-to-action.
+
+### The Goal
+
+Create a small badge that smoothly pulses between two background colors.
+
+<CodePenEmbed 
+  title="Background Color Pulse Effect (Keyframes & Iteration Count)"
+  penId="OPNdxdQ"
+/>
+
+## Project 4: Creating a "Water Wave" Background (Complex Keyframes)
+
+This advanced project combines multiple properties (`transform`, `opacity`, `filter`) within keyframes to create a complex, moving visual effect, simulating a water or gradient wave.
+
+### The Goal
+
+Animate a large pseudo-element to create a constantly moving, subtle wave-like background effect.
+
+<CodePenEmbed 
+  title="Creating a Water Wave Background (Complex Keyframes)"
+  penId="jEqdGRX"
+/>
+
+## Your Challenge
+
+Take what you've learned and build the following:
+
+1.  **Animated Menu Icon (Hamburger to 'X'):** Use CSS **Transforms** (`rotate`, `translate`) and **Transitions** to smoothly transform a three-line hamburger menu icon into an 'X' symbol when a parent container is hovered.
+2.  **Slide-In Notification:** Create a notification bar that slides into view from the top of the screen using **Keyframes** to animate the `transform: translateY()` property. The animation should run only once when the page loads (`animation-iteration-count: 1`).
+
+<AdsComponent />
+<br />
+
+## Key Takeaways
+
+  * **Transitions** are best for **state changes** (like `:hover`, `:focus`).
+  * **Keyframes** are essential for **automatic, continuous, or sequential animations**.
+  * The `transform` property is your most powerful tool for performant animations, especially `translate`, `rotate`, and `scale`.
+  * Using `alternate` in your `animation-direction` can create seamless, back-and-forth animations without harsh jumps.
+
+Ready to test your skills on the next big area?