How to change the Divi slider transitions

The Divi slider module allows you to add content sliders to your Divi website. The module allows you to add text, images, and videos to your slides that can be controlled via left & right navigation arrows or dot navigation. As with all Divi modules, there are settings to cover all elements of the slider.

Change your Divi slider module slide transitions

The default Divi slider transitions (as seen in example 1 below) is for the text content and button to fade/slide up from the bottom and the slider image fading/sliding from the left.

By adding any of the following CSS code into your Slider modules Custom CSS boxes in the Advanced tab for SLIDE DESCRIPTION (.et_pb_slider .et_pb_slider .et_pb_slide_description) and SLIDE IMAGE (.et_pb_slider.et_pb_slider .et_pb_slide_image), you can change the slider content transitions. You can add a single transition type to 1 or both of the image and description boxes and they can be the same or different. 

[php]animation-name:fadeIn;
 animation-name:fadeTop;
 animation-name:fadeLeft;
 animation-name:fadeRight;
 animation-name:fadeBottom;
 animation-name:fadeInTop;
 animation-name:fadeInLeft;
 animation-name:fadeInRight;
 animation-name:fadeInBottom;
 animation-name:flipInX;
 animation-name:flipInY;[/php]

If you are using the slider module you may also be interested to learn how to change the Divi slider height using the inbuilt module settings.

1. Default Divi Slider animations

2. Custom animation to Fade In Left

CSS code added to the Module settings;
SLIDE DESCRIPTION CSS Box – animation-name:fadeInLeft;
SLIDE IMAGE CSS box- animation-name:fadeInLeft;

3. Custom animation to Flip In X

CSS code added to the Module settings;
SLIDE DESCRIPTION CSS box – animation-name:flipInX;
SLIDE IMAGE CSS box – animation-name:flipInX;

4. Custom animation to Fade In Left + Fade In Right

CSS code added to the Module settings;
SLIDE DESCRIPTION CSS box – animation-name:fadeInLeft;
SLIDE IMAGE CSS box – animation-name:fadeInRight;