Divi Filter
Divi Filter Premium
Searchβ¦
π₯³
Introduction
β¨
Getting Started
Download + Installation
Filter Columns
Filter Rows (Premium)
Get the Premium features
π¨
Styling
Remove white space
Filter Animation (Premium)
Style Active Button (Premium)
Where to add custom CSS?
βΆ
Layouts
Import Layouts
π·β
Functional
Filter already applied (Premium)
Show all elements
Filter Specialty Sections
Filter blog posts
Multiple filters on one page (Premium)
Fixed class
Unfiltered element (Premium)
π
Filtering Types
Picky Filtering (Premium)
Multi select filtering (Premium)
π
Links
Visit Shop
Powered By
GitBook
Filter Animation (Premium)
Just define a CSS keyframe animation for the
df-animation
class. You can animate any CSS property.
You can watch
this tutorial
to find out, how to add CSS to divi.
Examples
Changes opacity from 0 to 1
.df-animation {
animation: OpacityAnimation;
animation-duration: 2s;
}
@keyframes OpacityAnimation {
0% {opacity: 0;}
100% {opacity: 1;}
}
Makes elements first grey and then gives them color
.df-animation {
animation: GreyscaleAnimation;
animation-duration: 2s;
}
@keyframes GreyscaleAnimation {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
β
Combine Animations
You can also combine them, or add as many CSS as you want. E.g. scales the elements from 0 to 100% and also increases the opacity
.df-animation {
animation: ScaleOpacityAnimation;
animation-duration: 2s;
}
β
@keyframes ScaleOpacityAnimation {
0% {transform: scale(0);opacity: 0;}
100% {transform: scale(1);opacity: 1;}
}
Appear animation
This is the nice appear animation that my friend Richard used, when he designed the
team filter
.
.df-animation {
animation: animation-example;
animation-duration: 2s;
animation-delay: 0s!important;
}
@keyframes animation-example {
0% {opacity: 0; transform: translatey(50px);}
100% {opacity: 1; transform: translatey(0);}
}
For more information on keyframe animations, visit
w3schools
.
You can get Divi Filter Premium by clicking
here
.
Where to add custom CSS?
This you can find on the following page:
β
Where to add custom CSS?
β
Styling - Previous
Remove white space
Next - Styling
Style Active Button (Premium)
Last modified
6mo ago
Copy link
Outline
Examples
Changes opacity from 0 to 1
Makes elements first grey and then gives them color
Combine Animations
Appear animation
Where to add custom CSS?