Filter Animation (Premium)
How to add a filter animation to your filtering.
Daniel
Last Update 3 years ago
Just define a CSS keyframe animation for the df-animation class. You can animate any CSS property.
I would recommend adding it to your page CSS (https://www.divithemeexamples.com/add-custom-css-to-divi/).
For example:
/* 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 animation2 {
0% {
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}
100% {
-webkit-filter: grayscale(0%);
filter: grayscale(0%);
}
}
/* 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;}
}
/* Example 1 */
.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.