Call Now

Divi’s 18 Built In Animations Demo

This page demonstrates all 18 of Divi’s built in animations. For a tutorial on how to apply these to just about any row, section or module, see Use All 18 Divi Built-In Animations Anywhere.

Divi Built-In Animations – No CSS Required

These animations don’t require any CSS to make them work. Simply enter the text shown into the section’s, row’s or module’s CSS Class field.

<style><!-- [et_pb_line_break_holder] -->.et_pb_main_blurb_image img {<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.syntaxhighlighter {<!-- [et_pb_line_break_holder] --> font-size: 12px !important;<!-- [et_pb_line_break_holder] --> margin: 5px !important;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->/* Title over image */<!-- [et_pb_line_break_holder] -->.et_pb_blurb_container {<!-- [et_pb_line_break_holder] --> padding: 0;<!-- [et_pb_line_break_holder] --> margin: -3em 0 0 0;<!-- [et_pb_line_break_holder] --> position: relative;<!-- [et_pb_line_break_holder] --> background-color: transparent;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.et_pb_blurb h4 {<!-- [et_pb_line_break_holder] --> height: 42px;<!-- [et_pb_line_break_holder] --> width: 100%;<!-- [et_pb_line_break_holder] --> background-color: hsla(24, 7%, 29%, 0.8);<!-- [et_pb_line_break_holder] --> padding: 10px;<!-- [et_pb_line_break_holder] --> color: #fff;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.et_pb_blurb h4 a {<!-- [et_pb_line_break_holder] --> font-size: 92%;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] -->.et_pb_blurb_content {<!-- [et_pb_line_break_holder] --> line-height: 1.7;<!-- [et_pb_line_break_holder] --> text-align: left;<!-- [et_pb_line_break_holder] --> padding: 20px;<!-- [et_pb_line_break_holder] -->}<!-- [et_pb_line_break_holder] --></style>
Image of cute puppy used to demonstrate Divi animations

Fade In

CSS Class: et-waypoint et_pb_animation_fade_in
Image of cute puppy used to demonstrate Divi animations

Fade Top

CSS Class: et-waypoint et_pb_animation_top
Image of cute puppy used to demonstrate Divi animations

Fade Bottom

CSS Class: et-waypoint et_pb_animation_bottom
Image of cute puppy used to demonstrate Divi animations

Fade Left

CSS Class: et-waypoint et_pb_animation_left
Image of cute puppy used to demonstrate Divi animations

Fade Right

CSS Class: et-waypoint et_pb_animation_right

Divi Built-In Animations = Some CSS Needed

There are two steps required to make these Divi animations work:

  1. Enter the text shown into the section’s, row’s or module’s CSS Class field.
  2. Add the CSS displayed to your child theme’s style.css file, or to the Additional CSS in the Theme Customizer, or the page’s Divi Custom CSS field.
Image of cute puppy used to demonstrate Divi animations

Fade In Top

CSS Class: et-waypoint trg_fadeintop

CSS Code:

.trg_fadeintop.et-animated {
  opacity: 1;
  -webkit-animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Fade In Bottom

CSS Class: et-waypoint trg_fadeinbottom
CSS Code:

.trg_fadeinbottom.et-animated {
  opacity: 1;
  -webkit-animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Fade In Left

CSS Class: et-waypoint trg_fadeinleft
CSS Code:

.trg_fadeinleft.et-animated {
  opacity: 1;
  -webkit-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Fade In Right

CSS Class: et-waypoint trg_fadeinright
CSS Code:

.trg_fadeinright.et-animated {
  opacity: 1;
  -webkit-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeInRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Flip In X

CSS Class: et-waypoint trg_flipinx
CSS Code:

.trg_flipinx.et-animated {
  -webkit-animation: flipInX 0.6s ease-in-out;
  -moz-animation: flipInX 0.6s ease-in-out;
  -o-animation: flipInX 0.6s ease-in-out;
  animation: flipInX 0.6s ease-in-out;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  opacity: 1;
}
Image of cute puppy used to demonstrate Divi animations

Flip In Y

CSS Class: et-waypoint trg_flipiny
CSS Code:

.trg_flipiny.et-animated {
  -webkit-animation: flipInY 0.6s ease-in-out;
  -moz-animation: flipInY 0.6s ease-in-out;
  -o-animation: flipInY 0.6s ease-in-out;
  animation: flipInY 0.6s ease-in-out;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  opacity: 1;
}
Image of cute puppy used to demonstrate Divi animations

Grid Fade In

CSS Class: et-waypoint trg_gridfadein
CSS Code:

.trg_gridfadein.et-animated {
  opacity: 1;
  -webkit-animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: gridFadeIn 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Grow

CSS Class: et-waypoint trg_grow
CSS Code:

.trg_grow.et-animated {
  opacity: 1;
  -webkit-transform-origin: 0 0;
  -webkit-animation: Grow 0.4s ease-in-out;
  -moz-animation: Grow 0.8s ease-in-out;
  -o-animation: Grow 0.4s ease-in-out;
  animation: Grow 0.4s ease-in-out;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
}
Image of cute puppy used to demonstrate Divi animations

Slide Width

CSS Class: et-waypoint trg_slidewidth
CSS Code:

.trg_slidewidth.et-animated {
  opacity: 1;
  -webkit-animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: slideWidth 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}

Divi Built-In Animations – Disappearing Acts

The final group of Divi animations are used to make things gracefully disappear. To see the demonstration of these effects, you will need to click and hold. When the mouse button is released, the object will re-appear.

For these to be useful, you would probably want to trigger them on a click event, which I’ll leave for another tutorial.

There are two steps to make these Divi animations work:

  1. Enter the text shown into the section’s, row’s or module’s CSS Class field.
  2. Add the CSS displayed to your child theme’s style.css file, or to the Additional CSS in the Theme Customizer, or the page’s Divi Custom CSS field.
Image of cute puppy used to demonstrate Divi animations

Fade Out Top

CSS Class: trg_fadeouttop
CSS Code:

.trg_fadeouttop:active {
  opacity: 0;
  -webkit-animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutTop 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Fade Out Bottom

CSS Class: trg_fadeoutbottom
CSS Code:

.trg_fadeoutbottom:active {
  opacity: 0;
  -webkit-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutBottom 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Fade Out Left

CSS Class: trg_fadeoutleft
CSS Code:

.trg_fadeoutleft:active {
  opacity: 0;
  -webkit-animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutLeft 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Image of cute puppy used to demonstrate Divi animations

Fade Out Right

CSS Class: trg_fadeoutright
CSS Code:

.trg_fadeoutright:active {
  opacity: 0;
  -webkit-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -moz-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  -o-animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
  animation: fadeOutRight 1s 1 cubic-bezier(0.77, 0, 0.175, 1);
}
Join our email list

Join our email list

Join our mailing list to receive the latest tech tips from our team.

You have Successfully Subscribed!

Pin It on Pinterest

Share This