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?