> For the complete documentation index, see [llms.txt](https://docs.danielvoelk.de/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.danielvoelk.de/styling/filter-animation-premium.md).

# 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](https://youtu.be/Ytz7p4Kedws?t=222) 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](https://demos.danielvoelk.de/team-section/).

```
.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](https://www.w3schools.com/css/css3_animations.asp).

{% hint style="info" %}
You can get Divi Filter Premium by clicking [here](https://shop.danielvoelk.de/#divi-filter).
{% endhint %}

## Where to add custom CSS?

This you can find on the following page:

{% content-ref url="/pages/B9JJMa4W2rpTLvGz2azR" %}
[Where to add custom CSS?](/styling/where-to-add-custom-css.md)
{% endcontent-ref %}