Override default Bricks animation values

Hi there,
how to override default css animation (animate.css) with a custom value and in the same time being able to set them in the editor?

For example: fadeInUp has translate3d(0,100%,0) and I’d like translate3d(0,30px,0) for a more suble effect.

I’ve tried placing the whole fadeinup animation targeting .brx-animated-fadeInUp but without effort.

Many thanks!


I just had to find a way to override all the “fadeIn” animations from 100% to 30px because 100% was too aggressive. Initially I tried to create the same keyframe animations in a the bricks child theme style.css file with the “!important” prop but that didn’t work. Instead I had to modify the animate.min.css file in the Bricks parent theme.

Apply this with caution because you’ll be modifying the parent theme file.

I copied and pasted the animate.min.css file into VScode, searched and replaced “100%” with “30px” and then pasted that code back into the WP Theme File Editor. That eased up all the FadeIn animations across my site. I haven’t tested to see if a Bricks update would replace the default animate.min.css file but you would have to follow these steps again if it does.

Hope this helps!


I got the same Problem. I want to set my custom translate3D settings because the original setting is too harsh.

1 Like