Skip to Content

Animations

A set of animation helper classes.

CSS November 17, 2020

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.

Source File

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