Animations

Helper classes for simple animations

hover-grow

The hover-grow class enlarges the applied element slightly when hovering over it with the mouse.

Hover me!

<button class="hover-grow">Hover me!</button>

Bounce and fade-in

These classes have a visual effect when the page is loaded or when they are applied to an element after having been absent (using javascript).

In the following examples the effect is demonstrated by applying the class to the admonition containing each link.

<div class="admonition info bounce">
  <p class="admonition-title">Bounce</p>
  <p><a href="#">Click here</a> to see the effect of the <code>bounce</code> class.</p>
</div>

Pulse

The pulse class shows an infinite pulsating opacity effect. This is mainly useful for placeholder content shown while the real content is being loaded from the server.