Divi Filter
⭐ Get Premium
  • 🥳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
    • Show all elements
    • Filter blog posts or portfolio items
    • Multiple filters on one page (Premium)
    • Unfiltered element (Premium)
    • Reset filter button (Premium)
    • Filter already applied (Premium)
    • Bugs? Use the Starting Delay
    • Fixed class
    • Filter Specialty Sections (Premium)
  • 🆎Filtering Types
    • Picky Filtering (Premium)
    • Multi select filtering (Premium)
  • 🔗Links
    • Visit Shop
Powered by GitBook
On this page
  • 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?

Was this helpful?

  1. Styling

Filter Animation (Premium)

PreviousRemove white spaceNextStyle Active Button (Premium)

Last updated 3 years ago

Was this helpful?

Just define a CSS keyframe animation for the df-animation class. You can animate any CSS property.

You can watch 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

.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);}
}

Where to add custom CSS?

This you can find on the following page:

This is the nice appear animation that my friend Richard used, when he designed the .

For more information on keyframe animations, visit .

You can get Divi Filter Premium by clicking .

🎨
this tutorial
team filter
w3schools
here
Where to add custom CSS?