Skip to Content


A set of animation helper classes.

CSS March 22, 2022


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.

Was this page helpful? Yes No

    A feedback message is required to submit this form.

    Please check that you have entered a valid email address.

    Enter your email address if you would like a response.

    Thank you for your feedback!

    Source File

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