CSS Transition & Filter
CSS Transition
Transition is the simplest way to animate CSS — specify which properties change smoothly, how long, and what timing.
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
HTML
<style>
.button {
background: #3498db;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
transition: all 0.3s ease;
}
.button:hover {
background: #2980b9;
transform: scale(1.05);
}
</style>
<button class="button">Hover me</button>
CSS Filter
Filters apply visual effects to elements:
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
HTML
<style>
.image {
filter: grayscale(100%);
transition: filter 0.3s ease;
}
.image:hover {
filter: grayscale(0%);
}
</style>
<img class="image" src="/assets/images/tutorials/html-example-photo.webp" alt="Photo">
Combining Transition + Filter
Example
HTML
<style>
.card {
filter: blur(2px) brightness(0.8);
transition: filter 0.5s ease;
}
.card:hover {
filter: blur(0) brightness(1);
}
</style>
<div class="card">Hover to sharpen and brighten</div>
❓ 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?
A No. Only some properties support transitions. Best performance with `transform` and `opacity` — browsers can GPU-accelerate them. Don't animate `width`, `height`, `top`, `left` — causes reflow and jank.
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.