Filter Animation (Premium)

How to add a filter animation to your filtering.

Daniel

Last Update 5 months 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.

Still need help? Message Us