This is fork from Geoff Graham's animate.scss, but generate vendor prefix by autoprefixer.you may use it if you also use task runners in your project.
The default import includes all animations.
@import "animate.scss";
Want to pick and choose which animations are imported? Go into animate.scss and comment out what you don't need.
// Always required
@import
"_properties";
// Import the animations
@import
// "_attention/attention.scss", // This will not import
"_bouncing-entrances/bouncing-entrances.scss",
"_bouncing-exits/bouncing-exits.scss",
"_fading-entrances/fading-entrances.scss",
"_fading-exits/fading-exits.scss",
"_flippers/flippers.scss",
"_lightspeed/lightspeed.scss",
"_rotating-entrances/rotating-entrances.scss",
"_rotating-exits/rotating-exits.scss",
"_specials/specials.scss";
You only want one of two of the animations? You can @import the specific partials in animate.scss instead (Example: @import "_attention/_bounce";).
Once your files have been added to your project and you've customized your @imports, you can start including the animations directly to your classes.
.your-class-name {
@include bounceIn();
}
The mixin includes configurable options to customize the delay, count duration, function and fill-mode of your animations.
.your-class-name {
@include bounceIn(
$duration: 1s,
$count: 2,
$delay: .2s,
$function: ease,
$fill: both
);
}
You can have that too. Link up animate.css to your document <head> and add the animations like you would any class name.
Animate.css and Animate.scss are both licensed under the MIT license. (http://opensource.org/licenses/MIT)
Feel free to submit a pull request. I'm open to animations not included in Animate.css. If you're going to submit a pull request, please match the formatting (naming convention and file structure) and include a demo of your submission on CodePen.
Thanks!