22 #Transitions Transitions extended

transition-*

These transition classes each provide a simple effect for animating an element. Use the transition-* class, then toggle the is-in class to trigger the effect.

Transitioned elements will always be visible/active if JavaScript is disabled. This is determined by the presence of a js or no-js class on the <html> element—We recommend the use of Modernizr to enable this.

If you see unwanted scrollbars around a transition element, add the class transition-container to its parent element.

Examples

Default styling

Transition example

This is an example of a transition. Click the button again to hide.

transition-fadein

Fade in

Transition example

This is an example of a transition. Click the button again to hide.

transition-flyleft

Fly to the left

Transition example

This is an example of a transition. Click the button again to hide.

transition-flyright

Fly to the right

Transition example

This is an example of a transition. Click the button again to hide.

transition-flyup

Fly up

Transition example

This is an example of a transition. Click the button again to hide.

transition-flydown

Fly down

Transition example

This is an example of a transition. Click the button again to hide.

transition-zoom

Zoom in

Transition example

This is an example of a transition. Click the button again to hide.

<div class="[modifier class]">
  <h4 class="subheader">Transition example</h4>
  <p>This is an example of a transition. Click the button again to hide.</p>
</div>
<button class="btn toggle-transition">Show transition</button>