Vitalize

A flexible cross-browser library of CSS keyframe animations built with Sass. Components based on Dan Eden's Animate.css.

Documentation

Installation

Installing via bower

bower install vitalize

Settings

You may change the settings of the package by copying the package's _settings.scss partial into your sass project. Afterwards you simply need to uncomment the variables you wish to make changes to.

The settings are organized in 3 priority levels ranging from global, animation group and finally the animation itself. The global settings are inherited by every group animations which in turn are inherited by all animations unless otherwise specified more explicitly.

Options

Include

The includes variable defines if you wish the package to automatically generate all of the animations' classes.

The default is true.

// Include global.
$vitalize-include-class: true;

// Include animations group which inherit the global default.
$vitalize-{animations-group}-include-class: $vitalize-include-class;

// Include animation which inherit his animations group's default.
$vitalize-{animation}-include-class: $vitalize-{animations-group}-include-class;

You may set the global include default to false if you wish to only use the animations' mixins and create your own classes or simply if you want to generate specific animations group or animations. But don't forget to set the include of the desired animations group or animations' to true.

Properties

The properties variable defines the animations' properties.

The default are:

// The default value of the animation properties.
'count': 1,
'duration': 1s,
'delay': 0s,
'function': 'ease',
'fill-mode': 'both',
'visibility': 'hidden'

If wish to make changes to the defaults you may do so by adding the specific key with its new value to the $vitalize-default-properties variable like so:

// The default properties you want to change.
$vitalize-default-properties: (
    'duration': 2s,
    'function': 'linear'
);

This will be merged with the global defaults and change defaults of all the animations to:

// The new default properties.
'count': 1,
'duration': 2s,
'delay': 0s,
'function': 'linear',
'fill-mode': 'both',
'visibility': 'hidden'

Just like the include variable you may set the properties of specific animations group or animations by modifying their respective properties variable.

Extensions

The extension variable generate and append a secondary class to the current animation class to overwrite the animation defaults.

The default is an empty map ().

You may define your own extensions like this:

// Exemple of an extension.
$vitalize-default-extensions: (
    'property': (
        'class': value,
        'second-class': value
    ),
    'second-property': (
        'class': value,
    )
);

With that in mind, let's pretend you want to add a 500ms, 1s and 2s delays as a default for all your animations class. You can accomplish this like so:

// Exemple of delay extensions.
$vitalize-default-extensions: (
    'delay': (
        '500ms': 500ms,
        'one-second': 1s,
        '2s': 2s,
    )
);

This will create classes &.delay-500ms, &.delay-one-second and &.delay-2s with their respective values.

You will then be able to use the extension class with your animation as follows:

<!-- Will fade in as soon as the default delay is finished -->
<h1 class="fade-in">Title</h1>
<!-- Will fade in at the extension's delay value -->
<h2 class="fade-in delay-500ms"></h2>

The available properties for extensions are the same as the default properties variable.

Animations

Custom

It is possible to create your own animations by using the @include animation-set mixin.

.custom-animation {
    @include animation-set('animation-name') {
        //Your custom keyframes here
        0% {
            color: blue;
        }
        100% {
            color: red;
        }
    }
}

You may want to pass some properties or extensions of it's own and you may do this with the optional second argument of the mixin. If no options are passed the animation will use the global default.

$options: (
    'properties': (
        'function': 'linear'
    ),
    'extensions': (
        'delay': (
            'five-second': 5s
        )
    )
);

.custom-animation {
    @include animation-set('animation-name', $options) {
        //Your custom keyframes here
        0% {
            color: blue;
        }
        100% {
            color: red;
        }
    }
}

Components

Demo of animations components can be found on Dan Eden's website at http://daneden.github.io/animate.css.

Attentions Seekers

Animation	Class
Bounce	.bounce
Flash	.flash
Jello	.jello
Pulse	.pulse
Rubber Band	.rubber-band
Shake	.shake
Swing	.swing
Tada	.tada
Wobble	.wobble

Bouncing Entrances

Animation	Class
Bounce In	.bounce-in
Bounce In Down	.bounce-in-down
Bounce In Left	.bounce-in-left
Bounce In Right	.bounce-in-right
Bounce In Up	.bounce-in-up

Bouncing Exits

Animation	Class
Bounce Out	.bounce-out
Bounce Out Down	.bounce-out-down
Bounce Out Left	.bounce-out-left
Bounce Out Right	.bounce-out-right
Bounce Out Up	.bounce-out-up

Fading Entrances

Animation	Class
Fade In	.fade-in
Fade In Down	.fade-in-down
Fade In Left	.fade-in-left
Fade In Right	.fade-in-right
Fade In Up	.fade-in-up

Fading Exits

Animation	Class
Fade Out	.fade-out
Fade Out Down	.fade-out-down
Fade Out Left	.fade-out-left
Fade Out Right	.fade-out-right
Fade Out Up	.fade-out-up

Flippers

Animation	Class
Flip	.flip

Flipping Entrances

Animation	Class
Flip In X	.flip-in-x
Flip In Y	.flip-in-y

Flipping Exits

Animation	Class
Flip Out X	.flip-out-x
Flip Out Y	.flip-out-y

Lightspeed

Animation	Class
Lightspeed In	.lightspeed-in
Lightspeed Out	.lightSpeed-out

Rotating Entrances

Animation	Class
Rotate In	.rotate-in
Rotate In Down Left	.rotate-in-down-left
Rotate In Down Right	.rotate-in-down-right
Rotate In Up Left	.rotate-in-up-left
Rotate In Up Right	.rotate-in-up-right

Rotating Exits

Animation	Class
Rotate Out	.rotate-out
Rotate Out Down Left	.rotate-out-down-left
Rotate Out Down Right	.rotate-out-down-right
Rotate Out Up Left	.rotate-out-up-left
Rotate Out Up Right	.rotate-out-up-right

Sliding Entrances

Animation	Class
Slide In Down	.slide-in-down
Slide In Left	.slide-in-left
Slide In Right	.slide-in-right
Slide In Up	.slide-in-up

Sliding Exits

Animation	Class
Slide Out Down	.slide-out-down
Slide Out Left	.slide-out-left
Slide Out Right	.slide-out-right
Slide Out Up	.slide-out-up

Specials

Animation	Class
Hinge	.hinge
Roll In	.roll-in
Roll Out	.roll-out

Zooming Entrances

Animation	Class
Zoom In	.zoom-in
Zoom In Down	.zoom-in-down
Zoom In Left	.zoom-in-left
Zoom In Right	.zoom-in-right
Zoom In Up	.zoom-in-up

Zooming Exits

Animation	Class
Zoom Out	.zoom-out
Zoom Out Down	.zoom-out-down
Zoom Out Left	.zoom-out-left
Zoom Out Right	.zoom-out-right
Zoom Out Up	.zoom-out-up

License

Vitalize is licensed under The MIT License (MIT).