A port of a port of animate.css to Stylus
npm install animate-stylnpm i animate-styl
animate-styl is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.
``javascript`
// i am using gulp here because i'm most familiar with it,
// but you can use whatever build system you want here
gulp.task( 'stylus', function() {
return gulp.src( './styl/main.styl' )
.pipe( stylus( {
use: animate({
all: false, // generate all classes by default, like pulling in the entire animate.css file
base: true, // generates base .animated class
attentionSeekers: true,
base: true,
bling: true,
bomb: true,
bouncingEntrances: true,
bouncingExits: true,
fadingEntrances: true,
fadingExits: true,
flippers: true,
lightspeed: true,
magic: true,
math: true,
perspective: true,
rotate: true,
rotatingEntrances: true,
rotatingExits: true,
slidingEntrances: true,
slidingExits: true,
specials: true,
zoomingEntrances: true,
zoomingExits: true,
}),
} ) )
.pipe( gulp.dest( './css' ) )
} )
and then in your stylus:
`stylus
@require 'animate'
// your animation code is auto generated here
.bounce-in
animation-name: bounceIn
`
The above is just to show all the options. Ideally you'd only pass in what you need, or, if you want everything, you can just pass in all: true.
For example, if you only use the slideInDown animation then you don't @require the whole library - just @require 'animate-stylus/sliders/slideInDown'. Or, if you want all the sliders, you can @require 'animate-stylus/sliders/*'. See the Stylus Docs for an explanation of file globbing.
HOWEVER, I feel like the ideal way to use this is to use the config object as part of your build step. Do whatever you want though.
Example of this method:
`stylus`
@require 'animate/lib/bling/*
// all bling animations here, but nothing else
`stylus
//list of animations that we are using
animations = (bounce slideInDown slideOutUp)
.animated
animation-duration: 1s
animation-fill-mode: both
for animation_name in animations
.{animation_name}
animation-name: animation_name
`
And then adding animations to elements with class names will work:
`html``This is bouncing