Filter Animation (Premium)

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

I would recommend adding it to your page CSS.

For example:

/* changes opacity from 0 to 1 */

.ef-animation {animation: OpacityAnimation; animation-duration: 2s;}

@keyframes OpacityAnimation {

from {opacity: 0;}

to {opacity: 1;}

}

/* makes elements first grey and then gives them color */

.ef-animation {animation: GreyscaleAnimation; animation-duration: 2s;}

@keyframes animation2 {

from { filter: grayscale(100%); }

to { 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 */

.ef-animation {animation: ScaleOpacityAnimation; animation-duration: 2s;}

@keyframes ScaleOpacityAnimation {

from {transform: scale(0);opacity: 0;}

to {transform: scale(1);opacity: 1;}

}

For more information on keyframe animations, visit w3schools.