Skip to Content
Menu

Animations

A set of animation helper classes.

CSS March 22, 2022

Usage

This is a variable or event handle.

Examples

Animate on DOM ready with a delay

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

Animate a slow fade in on window load

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

Animate a push on click

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

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

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

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

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

Use a combination of data attributes

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

Use a combination of classes and data attributes

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

Demo


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

Advanced

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.