CSS: CSS Transition & Filter
Last updated: 2026-10-13
1. CSS Transition
Transition is the simplest way to animate CSS — specify which properties change smoothly, how long, and what timing.
(1) Transition Properties
| Property | Values | Purpose |
|---|---|---|
transition-property |
all, color, transform |
Which properties animate |
transition-duration |
0.3s, 500ms |
How long the transition takes |
transition-timing-function |
ease, linear, ease-in, ease-out |
Speed curve |
transition-delay |
0s, 0.2s |
Delay before starting |
transition |
all 0.3s ease |
Shorthand |
▶ Example
▶ Try it Yourself2. CSS Filter
Filters apply visual effects to elements:
(1) Filter Functions
| Function | Values | Effect |
|---|---|---|
blur() |
5px, 10px |
Gaussian blur |
brightness() |
0.5, 1.5 |
Darker/brighter |
contrast() |
0.5, 2 |
Less/more contrast |
grayscale() |
0%, 100% |
Grayscale amount |
hue-rotate() |
90deg, 180deg |
Rotate hue |
invert() |
0%, 100% |
Invert colors |
opacity() |
0.5, 1 |
Transparency |
saturate() |
0.5, 2 |
Less/more saturated |
sepia() |
0%, 100% |
Sepia tone |
▶ Example
▶ Try it Yourself3. Combining Transition + Filter
▶ Example
▶ Try it Yourself❓ FAQ
Q What's the difference between transition and animation?
A transition needs a trigger (like hover) and only goes from state A to state B — no loops. animation doesn't need a trigger, can auto-play, supports multiple keyframes, loops, and reverse. Simple interactions use transition; complex auto-playing effects use animation.
Q Can all CSS properties be transitioned?
Q Does filter: blur() cause performance issues?
A Yes. blur is GPU-intensive — large area blur causes performance drops. Best to use blur on small elements only, or only in brief interactions like hover. Don't apply blur to videos or large images.
📖 Summary
- Transition is CSS animation's simplest form — specify which properties animate, duration, and timing
- Filters provide powerful image processing — blur, grayscale, color adjustments
- Combining both (like hover filter effects) creates rich interactive feedback
📝 Exercises
- Create a button that changes background color in 0.3s on hover, with slight scale increase.
- Create an image gallery: images show grayscale by default, smoothly become colorful on hover.
- Create a "navigation underline animation" — bottom line expands from center on hover.
- Use filter + transition to make images brighter and slightly blurred on hover.
