Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Change CSS filter property with Animation
The CSS filter property can be animated to create smooth visual effects on elements. By combining filter with CSS animations, you can create dynamic transitions between different filter states like brightness, contrast, blur, and more.
Syntax
selector {
filter: filter-function(value);
animation: animation-name duration timing-function iteration-count;
}
@keyframes animation-name {
from { filter: initial-value; }
to { filter: final-value; }
}
Example: Animated Contrast Filter
The following example demonstrates animating the contrast filter on an image −
<!DOCTYPE html>
<html>
<head>
<style>
.image-container {
width: 400px;
height: 250px;
background-image: url('/css/images/logo.png');
background-size: cover;
background-position: center;
border: 2px solid #333;
animation: contrastAnimation 3s infinite alternate;
}
@keyframes contrastAnimation {
0% {
filter: contrast(100%);
}
100% {
filter: contrast(400%);
}
}
</style>
</head>
<body>
<h2>Animating Filter Property</h2>
<div class="image-container"></div>
</body>
</html>
An image that continuously animates between normal contrast (100%) and high contrast (400%), creating a smooth pulsing effect that alternates back and forth every 3 seconds.
Example: Multiple Filter Animation
You can animate multiple filter effects simultaneously −
<!DOCTYPE html>
<html>
<head>
<style>
.multi-filter {
width: 300px;
height: 200px;
background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1);
border-radius: 10px;
animation: multiFilterAnimation 4s infinite;
margin: 20px auto;
}
@keyframes multiFilterAnimation {
0% {
filter: brightness(100%) saturate(100%) blur(0px);
}
25% {
filter: brightness(150%) saturate(200%) blur(2px);
}
50% {
filter: brightness(80%) saturate(50%) blur(5px);
}
75% {
filter: brightness(120%) saturate(150%) blur(1px);
}
100% {
filter: brightness(100%) saturate(100%) blur(0px);
}
}
</style>
</head>
<body>
<h2>Multiple Filter Effects Animation</h2>
<div class="multi-filter"></div>
</body>
</html>
A colorful gradient box that smoothly transitions through different combinations of brightness, saturation, and blur effects in a continuous 4-second loop, creating a dynamic visual experience.
Conclusion
CSS filter animations provide an powerful way to create engaging visual effects. You can animate individual filter functions or combine multiple filters for more complex animations that enhance user experience.
Updated on: 2026-03-15T13:30:36+05:30
378 Views
Advertisements