Write Complete Content for "Transitions & Animations" Section #115

This task involves writing the full educational content for the entire Transitions & Animations module of the CSS Tutorial.
The goal is to create clear, modern, and beginner-friendly MDX files with explanations, examples, visuals, and demo code.

Files to Complete

css/transitions-and-animations/
│── transforms.mdx
│── transitions.mdx
│── keyframes.mdx
└── animation-timing.mdx

What This Module Should Cover

1️⃣ transforms.mdx (CSS Transforms)

• Purpose of transforms
• 2D functions: translate, rotate, scale, skew
• 3D transforms: rotateX, rotateY, translateZ, perspective
• Best practices & common UI uses
• Demo examples and visuals

2️⃣ transitions.mdx (CSS Transitions)

• What transitions are and how they work
• transition-property, duration, timing-function, delay
• Shorthand usage
• Hover/UI examples (buttons, cards, menus)
• Visual explanation of timing functions

3️⃣ keyframes.mdx (CSS Keyframe Animations)

• What @keyframes is and why it’s used
• Syntax and step percentages
• Infinite loops, alternate animations
• Practical examples (fade, slide, bounce, loader)
• Demo files for practice

4️⃣ animation-timing.mdx (Timing Functions)

• How timing functions control animation behavior
• ease, ease-in, ease-out, steps(), cubic-bezier()
• Visual aids for curves & steps
• Real UI examples demonstrating timing differences

📌 Requirements (Same as Main Issue #78)

1. Write clear and easy-to-understand explanations.
2. Include working code snippets for every major concept.
3. Provide small HTML/CSS demo files under a code.
4. Add diagrams or suggested visuals where helpful.
5. Ensure smooth flow and learning progression.
6. Focus on modern CSS practices.

📦 Deliverables

• Fully written MDX files for all four topics.

• Demo files inside:

  ---
  title: "CSS Transforms (2D & 3D)"
  description: "Learn how to use the CSS transform property with functions like translate, rotate, scale, and skew to manipulate the position, size, and orientation of elements in 2D and 3D space."
  keywords: [CSS transform, 2D transforms, 3D transforms, translate, rotate, scale, skew, perspective, transform-origin]
  tags: [CSS transform, 2D transforms, 3D transforms, translate, rotate, scale, skew, perspective, transform-origin]
  sidebar_label: Transforms
  ---
  
  <!-- More content here -->