S-Animate.

Installation

Download it
Clone it git@github.com:kiriaze/s-animate.git
Install with bower bower install s-animate

Import into project @import 'animate/animate';

• Animation are imported with default variables set in _animate.scss.
• Properties are defined within _properties.scss.
• Comment / Uncomment the animations you’d like to use.
• Set your own values in your _base.scss or wherever your variables are defined to override the default properties:

Settings

$duration: .35s;
$delay: .2s;
$delay: 0s;
$function: ease;
$fill: both;
$visibility: visible;

Set the animations you’d like to use by defining them in your base.scss or similar.

$fadeIn: true;

Attach animations

Within markup

<div class="fadeIn"></div>

Within styles

// default
.logo {
	@extend .fadeIn;
}
// custom settings that would differ from global settings
.headline {
	@include fadeIn($duration, $delay, $delay, $function, $fill, $visibility);
}

---