<!-- !
animation -->
- CSS Animations allow you to create smooth transitions and dynamic effects by
animating changes to CSS properties over time.
#### Key Components of CSS Animations:
1. **`@keyframes` Rule**:
- Defines the stages of the animation and the styles at each stage.
- You can specify the styles at different percentages of the animation's
duration or use keywords like `from` (equivalent to `0%`) and `to` (equivalent
to `100%`).
- **Example**:
```css
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
```
2. **Animation Properties**:
- These properties are used to apply and control the animation on an
element.
- **`animation-name`**: Specifies the name of the `@keyframes` animation to
apply.
**Example**: `animation-name: slideIn;`
- **`animation-duration`**: Defines how long the animation takes to
complete one cycle.
- Example: `animation-duration: 2s;` (2 seconds)
- **`animation-timing-function`**: Specifies the speed curve of the
animation.
- Common values:
- `linear`: Constant speed from start to finish.
- `ease`: Starts slow, speeds up, and then slows down at the end.
- `ease-in`: Starts slow and then speeds up.
- `ease-out`: Starts fast and then slows down.
- `ease-in-out`: Slow start, fast middle, slow end.
- **`animation-delay`**: Sets a delay before the animation starts.
- Example: `animation-delay: 1s;` (starts after 1 second)
- **`animation-iteration-count`**: Defines how many times the animation
should repeat.
- Common values:
- `infinite`: Loops the animation indefinitely.
- A specific number (e.g., `3`).
- **Example**: `animation-iteration-count: infinite;`
- **`animation-direction`**: Specifies whether the animation should play
forward, backward, or alternate between the two.
- Values:
- `normal`: Plays the animation forwards.
- `reverse`: Plays the animation backwards.
- `alternate`: Alternates between forward and reverse on each cycle.
- **Example**: `animation-direction: alternate;`
- **`animation-fill-mode`**: Determines how the element should be styled
before the animation starts and after it ends.
- Values:
- `none`: Default, no styles applied before/after the animation.
- `forwards`: Retains the final styles after the animation ends.
- `backwards`: Applies the starting styles before the animation begins.
- `both`: Applies both `forwards` and `backwards` behaviors.
- **Example**: `animation-fill-mode: forwards;`
3. **Shorthand Property**:
- The `animation` property can be used to set all the animation properties
in one line.
- **Syntax**: `animation: name duration timing-function delay iteration-
count direction fill-mode play-state;`
- **Example**:
```css
.box {
animation: slideIn 2s ease-in-out 1s infinite alternate forwards;
}
```