Skip to content

Commit 8537fd7

Browse files
ajay-dhangarajay-dhangar
committed
done transitions & animations docs
1 parent 2b05036 commit 8537fd7

File tree

4 files changed

+501
-4
lines changed

4 files changed

+501
-4
lines changed

‎docs/css/transitions-and-animations/animation-timing.mdx‎

Lines changed: 107 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,107 @@
1-
<ComingSoon />
1+
---
2+
title: "Animation and Transition Timing"
3+
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."
4+
keywords: [CSS timing function, ease, linear, cubic-bezier, steps, step-start, step-end, acceleration, deceleration]
5+
tags: [CSS timing function, ease, linear, cubic-bezier, steps, step-start, step-end, acceleration, deceleration]
6+
sidebar_label: Animation Timing
7+
---
8+
9+
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**.
10+
11+
The properties used are:
12+
* `transition-timing-function` (for simple transitions)
13+
* `animation-timing-function` (for keyframe animations)
14+
15+
<AdsComponent />
16+
<br />
17+
18+
## 1. Standard Timing Keywords
19+
20+
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.
21+
22+
| Keyword | Description | Curve Behavior |
23+
| :--- | :--- | :--- |
24+
| **`ease`** (Default) | Starts slowly, speeds up quickly in the middle, and ends slowly. | Recommended for most smooth UI interactions. |
25+
| **`linear`** | Maintains a constant speed from start to finish. | Useful for continuous, cyclical animations (like a spinner). |
26+
| **`ease-in`** | Starts slowly and steadily accelerates until the end. | Gives the feeling of an element accelerating away from the user. |
27+
| **`ease-out`** | Starts quickly and steadily decelerates until the end. | Gives the feeling of an element slowing to a stop. |
28+
| **`ease-in-out`** | Starts and ends slowly, with a fast middle section. | Symmetrical, smooth motion in both directions. |
29+
30+
### Example Usage
31+
32+
```css title="styles.css"
33+
.box-in {
34+
/* Starts slow, ends fast */
35+
transition-timing-function: ease-in;
36+
}
37+
38+
.box-linear {
39+
/* Consistent speed */
40+
animation-timing-function: linear;
41+
}
42+
```
43+
44+
## 2. Customizing with `cubic-bezier()`
45+
46+
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.
47+
48+
The curve charts the progress of the animation (Y-axis, from 0 to 1) against the time elapsed (X-axis, from 0 to 1).
49+
50+
* **$P_0$:** Fixed at the start of the animation (0, 0).
51+
* **$P_3$:** Fixed at the end of the animation (1, 1).
52+
* **$P_1$:** Control point one, defined by $(x_1, y_1)$.
53+
* **$P_2$:** Control point two, defined by $(x_2, y_2)$.
54+
55+
### Syntax
56+
57+
```css title="styles.css"
58+
/* Custom Bezier curve for an aggressive, fast start and slow finish */
59+
transition-timing-function: cubic-bezier(0.8, 0.1, 0.2, 0.9);
60+
```
61+
62+
You can use online tools (like cubic-bezier visualizers) to experiment with these four values and create highly customized motion.
63+
64+
<AdsComponent />
65+
<br />
66+
67+
## 3. Discrete Movement with `steps()`
68+
69+
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.
70+
71+
### Syntax
72+
73+
The function requires two parameters:
74+
75+
```css title="styles.css"
76+
steps(number_of_steps, step_position);
77+
```
78+
79+
1. **`number_of_steps`:** The total number of equally spaced intervals the animation will pause during its duration.
80+
2. **`step_position`:** Defines where the jump occurs relative to the interval.
81+
* **`end`** (Default): The change happens at the end of each time interval (holds for the full interval, then jumps).
82+
* **`start`:** The change happens at the beginning of each time interval (jumps immediately, then holds).
83+
84+
### Example: Stepped Clock Hand
85+
86+
If an animation runs for 60 seconds and you want it to jump 60 times (once per second):
87+
88+
```css title="styles.css"
89+
animation: tick 60s steps(60, end);
90+
```
91+
92+
The animation will run in 60 discrete jumps over 60 seconds.
93+
94+
<AdsComponent />
95+
<br />
96+
97+
## Interactive Timing Function Demo
98+
99+
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.
100+
101+
<CodePenEmbed
102+
title="Interactive Timing Function Demo"
103+
penId="xbVzrLK"
104+
/>
105+
106+
107+
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.

‎docs/css/transitions-and-animations/keyframes.mdx‎

Lines changed: 118 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,118 @@
1-
<ComingSoon />
1+
---
2+
title: "CSS Keyframe Animations"
3+
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."
4+
keywords: [CSS animation, '@keyframes', animation-name, animation-duration, infinite animation, animation-fill-mode, forward, backward]
5+
tags: [CSS animation, '@keyframes', animation-name, animation-duration, infinite animation, animation-fill-mode, forward, backward]
6+
sidebar_label: Keyframes
7+
---
8+
9+
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.
10+
11+
Keyframes define a set of steps in an animation sequence, giving you precise control over styles at specific points in time.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. Defining the Animation (`@keyframes`)
17+
18+
The foundation of any complex CSS animation is the `@keyframes` rule. You must give the animation a unique name.
19+
20+
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%`).
21+
22+
### Example Keyframe Structure
23+
24+
```css title="styles.css"
25+
/* 1. Define the animation and give it a name (e.g., 'pulse') */
26+
@keyframes pulse {
27+
/* Start State (0%) */
28+
0% {
29+
transform: scale(1);
30+
opacity: 0.8;
31+
}
32+
33+
/* Mid-point State (50%) */
34+
50% {
35+
transform: scale(1.1);
36+
opacity: 1;
37+
}
38+
39+
/* End State (100%) */
40+
100% {
41+
transform: scale(1);
42+
opacity: 0.8;
43+
}
44+
}
45+
```
46+
47+
<AdsComponent />
48+
<br />
49+
50+
## 2. Applying the Animation (The `animation` Shorthand)
51+
52+
Once the keyframes are defined, you must attach them to an element using the `animation` property (or its longhand components).
53+
54+
The `animation` shorthand is typically defined in this order:
55+
56+
```css title="styles.css"
57+
animation: [name] [duration] [timing-function] [delay] [iteration-count] [direction] [fill-mode] [play-state];
58+
```
59+
60+
### Key Properties
61+
62+
| Property | Description | Common Values |
63+
| :--- | :--- | :--- |
64+
| **`animation-name`** | The name of the `@keyframes` rule (e.g., `pulse`). | Custom name |
65+
| **`animation-duration`** | How long one cycle of the animation lasts. | `2s`, `500ms` |
66+
| **`animation-timing-function`** | The speed curve for the animation cycle. | `ease-in`, `linear`, `cubic-bezier` |
67+
| **`animation-iteration-count`** | How many times the animation should repeat. | `1`, `3`, **`infinite`** |
68+
| **`animation-direction`** | Whether to play forward, backward, or alternate. | `normal`, `reverse`, **`alternate`** |
69+
| **`animation-fill-mode`** | What styles the element retains before and after the animation. | `none`, **`forwards`**, `backwards`, `both` |
70+
71+
### The `animation-fill-mode`
72+
73+
This property is crucial for ensuring the animation's final state sticks after it's finished playing.
74+
75+
* **`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.
76+
* **`backwards`:** The element applies the styles defined in the initial keyframe (`0%` or `from`) immediately when the page loads, even during the `animation-delay`.
77+
* **`both`:** Applies both `forwards` and `backwards` behavior.
78+
79+
## 3. Full Animation Example
80+
81+
Let's apply the `pulse` keyframes defined earlier to a button.
82+
83+
```css title="styles.css"
84+
.animated-button {
85+
/* 1. Apply the animation shorthand */
86+
animation: pulse 2s ease-in-out infinite alternate;
87+
88+
/* Break down:
89+
- name: pulse
90+
- duration: 2 seconds
91+
- timing: ease-in-out
92+
- delay: 0s (default)
93+
- count: infinite (keeps looping)
94+
- direction: alternate (reverses every cycle)
95+
*/
96+
}
97+
```
98+
99+
This animation will:
100+
101+
1. Run the `pulse` keyframes over 2 seconds.
102+
2. In the first cycle, it goes from `0%` to `100%` (out then in).
103+
3. In the second cycle, due to `alternate`, it runs from `100%` back to `0%` (in then out).
104+
4. This continues indefinitely.
105+
106+
<AdsComponent />
107+
<br />
108+
109+
## Interactive Keyframes Demo
110+
111+
This demo combines keyframes with the `animation` shorthand to create a loading spin effect that runs infinitely.
112+
113+
<CodePenEmbed
114+
title="Interactive Keyframes Demo"
115+
penId="emZKRgb"
116+
/>
117+
118+
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.

‎docs/css/transitions-and-animations/transforms.mdx‎

Lines changed: 157 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,157 @@
1-
<ComingSoon />
1+
---
2+
title: "CSS Transforms (2D and 3D)"
3+
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."
4+
keywords: [CSS transform, translate, scale, rotate, skew, matrix, 3D transform, GPU acceleration, performance]
5+
tags: [CSS transform, translate, scale, rotate, skew, matrix, 3D transform, GPU acceleration, performance]
6+
sidebar_label: Transforms
7+
---
8+
9+
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.
10+
11+
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.
12+
13+
<AdsComponent />
14+
<br />
15+
16+
## 1. The `transform` Property and Performance
17+
18+
All transform functions are applied via the single `transform` property.
19+
20+
```css title="styles.css"
21+
.box {
22+
/* Apply multiple transformations in sequence */
23+
transform: translateX(10px) rotate(45deg) scale(1.2);
24+
}
25+
```
26+
27+
### GPU Acceleration (`translate3d` and `translateZ`)
28+
29+
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**.
30+
31+
To explicitly ensure GPU acceleration, you can use the 3D translation functions, even if you only need 2D movement:
32+
33+
```css title="styles.css"
34+
/* Triggers hardware acceleration for smoother animation */
35+
transform: translate3d(50px, 0, 0);
36+
```
37+
38+
## 2. 2D Transform Functions
39+
40+
These are the most common functions used to manipulate elements on the X and Y axes.
41+
42+
### 2.1. `translate()` (Moving)
43+
44+
Shifts the position of an element along the X and Y axes.
45+
46+
| Function | Parameter | Description |
47+
| :--- | :--- | :--- |
48+
| `translateX(n)` | Length or `%` | Moves the element horizontally. |
49+
| `translateY(n)` | Length or `%` | Moves the element vertically. |
50+
| `translate(x, y)` | Length or `%` | Moves the element both horizontally and vertically. |
51+
52+
```css title="styles.css"
53+
/* Moves the element 100px to the right and 50px down */
54+
transform: translate(100px, 50px);
55+
```
56+
57+
<AdsComponent />
58+
<br />
59+
60+
### 2.2. `scale()` (Resizing)
61+
62+
Resizes the element by a given factor. A factor of `1` is the original size.
63+
64+
| Function | Parameter | Description |
65+
| :--- | :--- | :--- |
66+
| `scaleX(n)` | Number | Stretches or compresses horizontally. |
67+
| `scaleY(n)` | Number | Stretches or compresses vertically. |
68+
| `scale(n)` | Number | Scales uniformly (affects both X and Y). |
69+
70+
```css title="styles.css"
71+
/* Shrinks the element to half its original size */
72+
transform: scale(0.5);
73+
/* Makes the element 1.5 times its original size */
74+
transform: scale(1.5);
75+
```
76+
77+
### 2.3. `rotate()` (Turning)
78+
79+
Rotates the element around its central origin point.
80+
81+
```css title="styles.css"
82+
/* Rotates the element 45 degrees clockwise */
83+
transform: rotate(45deg);
84+
85+
/* Rotates counter-clockwise */
86+
transform: rotate(-15deg);
87+
```
88+
89+
### 2.4. `skew()` (Distorting)
90+
91+
Distorts the element along the X and Y axes, giving it a slanted appearance.
92+
93+
| Function | Parameter | Description |
94+
| :--- | :--- | :--- |
95+
| `skewX(n)` | Angle | Skews the element horizontally. |
96+
| `skewY(n)` | Angle | Skews the element vertically. |
97+
| `skew(x-angle, y-angle)` | Angles | Skews both horizontally and vertically. |
98+
99+
```css title="styles.css"
100+
/* Skews the element by 15 degrees horizontally */
101+
transform: skewX(15deg);
102+
```
103+
104+
<AdsComponent />
105+
<br />
106+
107+
## 3. Controlling the Origin (`transform-origin`)
108+
109+
By default, all transformations (especially `rotate` and `scale`) occur around the exact center of the element (50% 50%).
110+
111+
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`).
112+
113+
```css title="styles.css"
114+
.pinwheel {
115+
/* Sets the pivot point to the top-left corner */
116+
transform-origin: 0 0;
117+
/* Now, the rotation will appear to spin from the top-left */
118+
transform: rotate(90deg);
119+
}
120+
```
121+
122+
## 4. 3D Transforms (Introduction)
123+
124+
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.
125+
126+
### Key 3D Functions
127+
128+
* `translateZ(n)`: Moves the element closer or further away from the viewer.
129+
* `rotateX(n)`: Rotates the element around its horizontal axis (flips top/bottom).
130+
* `rotateY(n)`: Rotates the element around its vertical axis (flips left/right).
131+
132+
```css title="styles.css"
133+
/* Applied to the PARENT container */
134+
.stage {
135+
perspective: 800px; /* How far away the viewer is */
136+
}
137+
138+
/* Applied to the CHILD element */
139+
.cube-face {
140+
/* Rotates 45 degrees, giving the appearance of depth */
141+
transform: rotateY(45deg);
142+
}
143+
```
144+
145+
<AdsComponent />
146+
<br />
147+
148+
## Interactive Transforms Demo
149+
150+
Hover over the box to see a combination of translation, scaling, and rotation applied simultaneously via a smooth CSS transition.
151+
152+
<CodePenEmbed
153+
title="Interactive Transforms Demo"
154+
penId="ByKVZKR"
155+
/>
156+
157+
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.

0 commit comments

Comments
 (0)