Skip to Content


A set of animation helper classes.

CSS November 17, 2020


This is a variable or event handle.


Animate on DOM ready with a delay

<div class="ready nebula-fade-in-up" nebula-delay="500">Welcome</div>

Animate a slow fade in on window load

<div class="load nebula-fade-in-up slow">Welcome</div>

Animate a push on click

<a class="click nebula-push" href="#">Click Here</a>

Use the nebula-click attribute to trigger an animation on click.

<a nebula-click="nebula-push" href="#">Click Here</a>

Use the nebula-hover attribute to trigger an animation on hover.

<a nebula-hover="nebula-grow" href="#">Hover Me</a>

Use a combination of data attributes

<a nebula-hover="nebula-grow" nebula-click="nebula-push" href="#">Click Here</a>

Use a combination of classes and data attributes

<a class="click nebula-push" nebula-hover="nebula-grow" href="#">Click Here</a>


Additional Notes

This uses a series of classes to modify the type and speed of animation. Elements must be display block or inline-block to be animated.

Event Trigger Classes

These have built in classes that listen for some events so that JavaScript does not need to be written to use them. They include:

  • ready (DOM ready)
  • load (window load)
  • click (element click)
  • animate (for manual trigger)

Speed Modifiers

  • fastest (.25s)
  • faster (.5s)
  • fast (.75s)
  • slow (1s)
  • slower (2s)
  • slowest (3s)

Continuous Animations

These animations continue repeatedly

  • nebula-spin
  • nebula-fade
  • nebula-zoom
  • nebula-wave-x
  • nebula-wave-y

One-Time Animations

These animations happen once and then stop.

  • nebula-fade-out
  • nebula-fade-out-up
  • nebula-fade-out-down
  • nebula-fade-out-left
  • nebula-fade-out-right
  • nebula-fade-in
  • nebula-fade-in-up
  • nebula-fade-in-down
  • nebula-fade-in-left
  • nebula-fade-in-right
  • nebula-zoom-out
  • nebula-zoom-in
  • nebula-reveal-in
  • nebula-reveal-out
  • nebula-stretch-in
  • nebula-stretch-out
  • nebula-flip-in-x
  • nebula-flip-in-y
  • nebula-flip-out-x
  • nebula-flip-out-y
  • nebula-tap
  • nebula-push
  • nebula-shove
  • nebula-shake
  • nebula-nod

Hover Animations

  • nebula-grow


For more advanced integration, see the nebulaAnimate() JavaScript function.

Source File

Located in /assets/scss/partials/_animations.scss.