diff --git a/docs/css/transitions-and-animations/animation-timing.mdx b/docs/css/transitions-and-animations/animation-timing.mdx
index e345ed2..52bd74e 100644
--- a/docs/css/transitions-and-animations/animation-timing.mdx
+++ b/docs/css/transitions-and-animations/animation-timing.mdx
@@ -1 +1,107 @@
-
\ No newline at end of file
+---
+title: "Animation and Transition Timing"
+description: "Learn about the transition-timing-function and animation-timing-function properties to control the speed curve of animations, including ease, linear, and cubic-bezier."
+keywords: [CSS timing function, ease, linear, cubic-bezier, steps, step-start, step-end, acceleration, deceleration]
+tags: [CSS timing function, ease, linear, cubic-bezier, steps, step-start, step-end, acceleration, deceleration]
+sidebar_label: Animation Timing
+---
+
+CSS transitions and animations don't just happen over a certain duration; they also follow a speed curve, which defines how quickly the animation starts, accelerates, and decelerates throughout its run time. This speed control is managed by the **timing function**.
+
+The properties used are:
+* `transition-timing-function` (for simple transitions)
+* `animation-timing-function` (for keyframe animations)
+
+
+
+
+## 1. Standard Timing Keywords
+
+The simplest way to control animation speed is by using one of the five standard keywords. Each keyword is a predefined implementation of the more complex `cubic-bezier()` function.
+
+| Keyword | Description | Curve Behavior |
+| :--- | :--- | :--- |
+| **`ease`** (Default) | Starts slowly, speeds up quickly in the middle, and ends slowly. | Recommended for most smooth UI interactions. |
+| **`linear`** | Maintains a constant speed from start to finish. | Useful for continuous, cyclical animations (like a spinner). |
+| **`ease-in`** | Starts slowly and steadily accelerates until the end. | Gives the feeling of an element accelerating away from the user. |
+| **`ease-out`** | Starts quickly and steadily decelerates until the end. | Gives the feeling of an element slowing to a stop. |
+| **`ease-in-out`** | Starts and ends slowly, with a fast middle section. | Symmetrical, smooth motion in both directions. |
+
+### Example Usage
+
+```css title="styles.css"
+.box-in {
+ /* Starts slow, ends fast */
+ transition-timing-function: ease-in;
+}
+
+.box-linear {
+ /* Consistent speed */
+ animation-timing-function: linear;
+}
+```
+
+## 2. Customizing with `cubic-bezier()`
+
+The `cubic-bezier(n, n, n, n)` function gives you complete control over the speed curve. It accepts four numerical parameters between `0` and `1`, which define the coordinates of two control points ($P_1$ and $P_2$) on a Bézier curve.
+
+The curve charts the progress of the animation (Y-axis, from 0 to 1) against the time elapsed (X-axis, from 0 to 1).
+
+ * **$P_0$:** Fixed at the start of the animation (0, 0).
+ * **$P_3$:** Fixed at the end of the animation (1, 1).
+ * **$P_1$:** Control point one, defined by $(x_1, y_1)$.
+ * **$P_2$:** Control point two, defined by $(x_2, y_2)$.
+
+### Syntax
+
+```css title="styles.css"
+/* Custom Bezier curve for an aggressive, fast start and slow finish */
+transition-timing-function: cubic-bezier(0.8, 0.1, 0.2, 0.9);
+```
+
+You can use online tools (like cubic-bezier visualizers) to experiment with these four values and create highly customized motion.
+
+
+
+
+## 3. Discrete Movement with `steps()`
+
+For animations that need to jump between states rather than transition smoothly, you use the `steps()` function. This is ideal for things like sprite-based animation, blinking effects, or simulating a clock with discrete ticks.
+
+### Syntax
+
+The function requires two parameters:
+
+```css title="styles.css"
+steps(number_of_steps, step_position);
+```
+
+1. **`number_of_steps`:** The total number of equally spaced intervals the animation will pause during its duration.
+2. **`step_position`:** Defines where the jump occurs relative to the interval.
+ * **`end`** (Default): The change happens at the end of each time interval (holds for the full interval, then jumps).
+ * **`start`:** The change happens at the beginning of each time interval (jumps immediately, then holds).
+
+### Example: Stepped Clock Hand
+
+If an animation runs for 60 seconds and you want it to jump 60 times (once per second):
+
+```css title="styles.css"
+animation: tick 60s steps(60, end);
+```
+
+The animation will run in 60 discrete jumps over 60 seconds.
+
+
+
+
+## Interactive Timing Function Demo
+
+The three boxes below execute the same `translateX(200px)` transition over the same duration, but each uses a different timing function, demonstrating how the speed curve dramatically changes the feel of the movement.
+
+
+
+
+In this demo, hovering over the container triggers the translation of each box. You can see how the different timing functions affect the speed and feel of the movement.
\ No newline at end of file
diff --git a/docs/css/transitions-and-animations/keyframes.mdx b/docs/css/transitions-and-animations/keyframes.mdx
index e345ed2..ff08b20 100644
--- a/docs/css/transitions-and-animations/keyframes.mdx
+++ b/docs/css/transitions-and-animations/keyframes.mdx
@@ -1 +1,118 @@
-
\ No newline at end of file
+---
+title: "CSS Keyframe Animations"
+description: "Learn how to use @keyframes to create complex, multi-stage animations in CSS, defining animation name, duration, timing, iteration count, and direction. Explore infinite loops and animation-fill-mode for advanced effects."
+keywords: [CSS animation, '@keyframes', animation-name, animation-duration, infinite animation, animation-fill-mode, forward, backward]
+tags: [CSS animation, '@keyframes', animation-name, animation-duration, infinite animation, animation-fill-mode, forward, backward]
+sidebar_label: Keyframes
+---
+
+While CSS Transitions are great for animating between two states (e.g., `:hover` and default), **CSS Keyframe Animations** allow you to create complex, multi-stage movements, loops, and effects that run automatically without requiring user interaction.
+
+Keyframes define a set of steps in an animation sequence, giving you precise control over styles at specific points in time.
+
+
+
+
+## 1. Defining the Animation (`@keyframes`)
+
+The foundation of any complex CSS animation is the `@keyframes` rule. You must give the animation a unique name.
+
+Inside the `@keyframes` block, you define the styles at various points in the animation cycle using percentages (`0%` to `100%`) or the keywords `from` (same as `0%`) and `to` (same as `100%`).
+
+### Example Keyframe Structure
+
+```css title="styles.css"
+/* 1. Define the animation and give it a name (e.g., 'pulse') */
+@keyframes pulse {
+ /* Start State (0%) */
+ 0% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+
+ /* Mid-point State (50%) */
+ 50% {
+ transform: scale(1.1);
+ opacity: 1;
+ }
+
+ /* End State (100%) */
+ 100% {
+ transform: scale(1);
+ opacity: 0.8;
+ }
+}
+```
+
+
+
+
+## 2. Applying the Animation (The `animation` Shorthand)
+
+Once the keyframes are defined, you must attach them to an element using the `animation` property (or its longhand components).
+
+The `animation` shorthand is typically defined in this order:
+
+```css title="styles.css"
+animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
+```
+
+### Key Properties
+
+| Property | Description | Common Values |
+| :--- | :--- | :--- |
+| **`animation-name`** | The name of the `@keyframes` rule (e.g., `pulse`). | Custom name |
+| **`animation-duration`** | How long one cycle of the animation lasts. | `2s`, `500ms` |
+| **`animation-timing-function`** | The speed curve for the animation cycle. | `ease-in`, `linear`, `cubic-bezier` |
+| **`animation-iteration-count`** | How many times the animation should repeat. | `1`, `3`, **`infinite`** |
+| **`animation-direction`** | Whether to play forward, backward, or alternate. | `normal`, `reverse`, **`alternate`** |
+| **`animation-fill-mode`** | What styles the element retains before and after the animation. | `none`, **`forwards`**, `backwards`, `both` |
+
+### The `animation-fill-mode`
+
+This property is crucial for ensuring the animation's final state sticks after it's finished playing.
+
+ * **`forwards`:** The element retains the styles defined in the final keyframe (`100%` or `to`). Use this if you want the element to stay in its animated end position.
+ * **`backwards`:** The element applies the styles defined in the initial keyframe (`0%` or `from`) immediately when the page loads, even during the `animation-delay`.
+ * **`both`:** Applies both `forwards` and `backwards` behavior.
+
+## 3. Full Animation Example
+
+Let's apply the `pulse` keyframes defined earlier to a button.
+
+```css title="styles.css"
+.animated-button {
+ /* 1. Apply the animation shorthand */
+ animation: pulse 2s ease-in-out infinite alternate;
+
+ /* Break down:
+ - name: pulse
+ - duration: 2 seconds
+ - timing: ease-in-out
+ - delay: 0s (default)
+ - count: infinite (keeps looping)
+ - direction: alternate (reverses every cycle)
+ */
+}
+```
+
+This animation will:
+
+1. Run the `pulse` keyframes over 2 seconds.
+2. In the first cycle, it goes from `0%` to `100%` (out then in).
+3. In the second cycle, due to `alternate`, it runs from `100%` back to `0%` (in then out).
+4. This continues indefinitely.
+
+
+
+
+## Interactive Keyframes Demo
+
+This demo combines keyframes with the `animation` shorthand to create a loading spin effect that runs infinitely.
+
+
+
+In this demo, the blue spinner continuously rotates due to the infinite animation, while the yellow box fades in and scales up once, retaining its final state thanks to the `forwards` fill mode.
\ No newline at end of file
diff --git a/docs/css/transitions-and-animations/transforms.mdx b/docs/css/transitions-and-animations/transforms.mdx
index e345ed2..14e6a94 100644
--- a/docs/css/transitions-and-animations/transforms.mdx
+++ b/docs/css/transitions-and-animations/transforms.mdx
@@ -1 +1,157 @@
-
\ No newline at end of file
+---
+title: "CSS Transforms (2D and 3D)"
+description: "Learn how to use the CSS transform property with functions like translate, scale, rotate, and skew to visually manipulate elements without affecting the document flow. Explore 2D and 3D transforms, GPU acceleration, and performance tips for smooth animations."
+keywords: [CSS transform, translate, scale, rotate, skew, matrix, 3D transform, GPU acceleration, performance]
+tags: [CSS transform, translate, scale, rotate, skew, matrix, 3D transform, GPU acceleration, performance]
+sidebar_label: Transforms
+---
+
+The `transform` property allows you to visually manipulate an element in 2D or 3D space. Crucially, these transformations are applied *after* the element has been laid out in the document flow, meaning they do **not** affect the position of surrounding elements.
+
+This non-disruptive nature, combined with their ability to be **GPU-accelerated**, makes transforms the preferred way to create smooth, high-performance animations and transitions in modern web development.
+
+
+
+
+## 1. The `transform` Property and Performance
+
+All transform functions are applied via the single `transform` property.
+
+```css title="styles.css"
+.box {
+ /* Apply multiple transformations in sequence */
+ transform: translateX(10px) rotate(45deg) scale(1.2);
+}
+```
+
+### GPU Acceleration (`translate3d` and `translateZ`)
+
+Transforms are highly performant because they can often be handled directly by the graphics processing unit (GPU). When transforming an element, it is promoted to its own **composited layer**.
+
+To explicitly ensure GPU acceleration, you can use the 3D translation functions, even if you only need 2D movement:
+
+```css title="styles.css"
+/* Triggers hardware acceleration for smoother animation */
+transform: translate3d(50px, 0, 0);
+```
+
+## 2. 2D Transform Functions
+
+These are the most common functions used to manipulate elements on the X and Y axes.
+
+### 2.1. `translate()` (Moving)
+
+Shifts the position of an element along the X and Y axes.
+
+| Function | Parameter | Description |
+| :--- | :--- | :--- |
+| `translateX(n)` | Length or `%` | Moves the element horizontally. |
+| `translateY(n)` | Length or `%` | Moves the element vertically. |
+| `translate(x, y)` | Length or `%` | Moves the element both horizontally and vertically. |
+
+```css title="styles.css"
+/* Moves the element 100px to the right and 50px down */
+transform: translate(100px, 50px);
+```
+
+
+
+
+### 2.2. `scale()` (Resizing)
+
+Resizes the element by a given factor. A factor of `1` is the original size.
+
+| Function | Parameter | Description |
+| :--- | :--- | :--- |
+| `scaleX(n)` | Number | Stretches or compresses horizontally. |
+| `scaleY(n)` | Number | Stretches or compresses vertically. |
+| `scale(n)` | Number | Scales uniformly (affects both X and Y). |
+
+```css title="styles.css"
+/* Shrinks the element to half its original size */
+transform: scale(0.5);
+/* Makes the element 1.5 times its original size */
+transform: scale(1.5);
+```
+
+### 2.3. `rotate()` (Turning)
+
+Rotates the element around its central origin point.
+
+```css title="styles.css"
+/* Rotates the element 45 degrees clockwise */
+transform: rotate(45deg);
+
+/* Rotates counter-clockwise */
+transform: rotate(-15deg);
+```
+
+### 2.4. `skew()` (Distorting)
+
+Distorts the element along the X and Y axes, giving it a slanted appearance.
+
+| Function | Parameter | Description |
+| :--- | :--- | :--- |
+| `skewX(n)` | Angle | Skews the element horizontally. |
+| `skewY(n)` | Angle | Skews the element vertically. |
+| `skew(x-angle, y-angle)` | Angles | Skews both horizontally and vertically. |
+
+```css title="styles.css"
+/* Skews the element by 15 degrees horizontally */
+transform: skewX(15deg);
+```
+
+
+
+
+## 3. Controlling the Origin (`transform-origin`)
+
+By default, all transformations (especially `rotate` and `scale`) occur around the exact center of the element (50% 50%).
+
+The `transform-origin` property allows you to change this pivot point. It accepts X and Y coordinates (lengths, percentages, or keywords like `top`, `bottom`, `left`, `right`).
+
+```css title="styles.css"
+.pinwheel {
+ /* Sets the pivot point to the top-left corner */
+ transform-origin: 0 0;
+ /* Now, the rotation will appear to spin from the top-left */
+ transform: rotate(90deg);
+}
+```
+
+## 4. 3D Transforms (Introduction)
+
+3D transforms extend these concepts into the Z-axis (depth). To properly perceive 3D effects, you must apply the `perspective` property to the **parent container** of the 3D element.
+
+### Key 3D Functions
+
+ * `translateZ(n)`: Moves the element closer or further away from the viewer.
+ * `rotateX(n)`: Rotates the element around its horizontal axis (flips top/bottom).
+ * `rotateY(n)`: Rotates the element around its vertical axis (flips left/right).
+
+```css title="styles.css"
+/* Applied to the PARENT container */
+.stage {
+ perspective: 800px; /* How far away the viewer is */
+}
+
+/* Applied to the CHILD element */
+.cube-face {
+ /* Rotates 45 degrees, giving the appearance of depth */
+ transform: rotateY(45deg);
+}
+```
+
+
+
+
+## Interactive Transforms Demo
+
+Hover over the box to see a combination of translation, scaling, and rotation applied simultaneously via a smooth CSS transition.
+
+
+
+In this demo, hovering over the blue box triggers a smooth transformation that moves, rotates, and scales the element, all while maintaining high performance through GPU acceleration. The skewed box below demonstrates the `skewX` function in action.
\ No newline at end of file
diff --git a/docs/css/transitions-and-animations/transitions.mdx b/docs/css/transitions-and-animations/transitions.mdx
index e345ed2..0c95e58 100644
--- a/docs/css/transitions-and-animations/transitions.mdx
+++ b/docs/css/transitions-and-animations/transitions.mdx
@@ -1 +1,119 @@
-
\ No newline at end of file
+---
+title: "CSS Transitions (Smooth Changes)"
+description: "Learn how to use CSS transitions to create smooth, animated changes between property values. Understand the four core transition properties: transition-property, transition-duration, transition-timing-function, and transition-delay, along with practical examples for enhancing user experience."
+keywords: [CSS transitions, transition-property, transition-duration, transition-timing-function, transition-delay, smooth animation, performance]
+tags: [CSS transitions, transition-property, transition-duration, transition-timing-function, transition-delay, smooth animation, performance]
+sidebar_label: Transitions
+---
+
+CSS Transitions provide a simple way to create smooth changes in an element's style over a specified period of time. Instead of having a property instantly jump from one value to another (e.g., changing color from red to blue instantly), transitions allow the browser to gradually animate the change.
+
+Transitions are essential for enhancing user experience by providing visual feedback and creating polished, professional interactions.
+
+
+
+
+## 1. The Four Core Properties
+
+A CSS transition requires defining at least two things: the property to change and the duration of the change.
+
+### 1.1. `transition-property`
+
+Specifies the CSS property name(s) that should be animated.
+
+| Value | Description |
+| :--- | :--- |
+| `none` | No property will transition. |
+| `all` | Every animatable property change will be transitioned (Default). |
+| `color`, `transform`, etc. | A specific property name (or comma-separated list). |
+
+### 1.2. `transition-duration`
+Specifies how long the transition should take. This value is mandatory.
+
+| Value | Description |
+| :--- | :--- |
+| `0.5s` | Half a second. |
+| `500ms` | 500 milliseconds (equivalent to 0.5s). |
+
+### 1.3. `transition-timing-function`
+
+Defines the speed curve of the transition (how the animation progresses over its duration).
+
+| Value | Description | Use |
+| :--- | :--- | :--- |
+| **`ease`** (Default) | Starts slowly, speeds up, and ends slowly (most natural). | General UI movement. |
+| **`linear`** | Stays at the same speed from start to finish. | Simple visual changes (like opacity). |
+| **`ease-in`** | Starts slowly, then speeds up quickly to the end. | Accelerating motion. |
+| **`ease-out`** | Starts quickly, then slows down toward the end. | Decelerating motion. |
+| `cubic-bezier(n,n,n,n)` | A custom curve for fine-grained control. | Complex, custom animations. |
+
+### 1.4. `transition-delay`
+
+Specifies a time to wait before the transition starts.
+
+| Value | Description |
+| :--- | :--- |
+| `1s` | Waits one second before starting the animation. |
+| `200ms` | Waits 200 milliseconds. |
+
+---
+
+## 2. The `transition` Shorthand
+
+It is common and recommended to use the `transition` shorthand property to combine all four values in a single line. The order is generally: `property duration timing-function delay`.
+
+```css title="styles.css"
+/* Full Shorthand Example */
+.card {
+ /* Animate the 'background-color' over 0.4 seconds, using an 'ease-out' curve,
+ and starting immediately (0s delay). */
+ transition: background-color 0.4s ease-out 0s;
+}
+
+/* Example with multiple properties */
+.button {
+ transition: background-color 0.3s ease,
+ transform 0.2s ease-out;
+}
+```
+
+
+
+
+## 3. Implementation Example: Hover Effect
+
+Transitions are typically defined in the default state of an element and are triggered when the element changes state (e.g., via `:hover`, `:focus`, or a class being added via JavaScript).
+
+### CSS
+
+```css title="styles.css"
+.box {
+ background-color: blue;
+ width: 100px;
+
+ /* 1. Define the transition here (in the default state) */
+ transition: background-color 0.5s ease-in-out, width 0.5s ease-in-out;
+}
+
+/* 2. Define the target styles in the hover state */
+.box:hover {
+ background-color: red;
+ width: 150px;
+}
+```
+
+When the user hovers, the styles are applied, but the `transition` definition tells the browser to animate the change over half a second instead of applying it immediately. When the user moves the mouse away, the transition runs smoothly in reverse.
+
+
+
+
+## Interactive Transitions Demo
+
+Hover over the button below to see a smooth transition applied to the `background-color`, `transform` (scaling), and `box-shadow` properties simultaneously.
+
+
+
+In this example, hovering over the button smoothly changes its background color, increases its size slightly, and adjusts the shadow to create a dynamic, engaging effect. The transition makes these changes feel fluid and responsive, enhancing the overall user experience.
\ No newline at end of file