split animations into different files about animate.css HOT 10 CLOSED

Hmmm, good idea - I had considered separation myself. I'll look into this - are folders really the best option? I think just having fadeIn.css, attention.css would suffice.

from animate.css.

it is also important to mention that users should combine their stylesheets into as few files as possible before deploy to reduce the number of requests and increase page load performance. I've been using RequireJS optimizer to merge all the @import into a single file, but other tools are also available like juicer and html5-boilerplate build script.

from animate.css.

I think folders are important since most users will probably have only 1 or 2 different fading animations per project, no need to load them all.

from animate.css.

Agreed. I think having folders is a good idea.

from animate.css.

The custom build tool (like Modernizr) could be very interesting / useful, but having to load x different css files if you want x animations wouldn't be a good idea in my opinion. Would need to many http requests in the end.

It's better to wrap it up / compress into one single css file. My two cents! ;)

from animate.css.

I think we're going to go for a custom build tool like Modernizr/HTML5BP. Allow users to choose options, while also allowing download of full file/minified.

from animate.css.

@EtienneLem the authoring format shouldn't be the same as the deployment format, users should combine and minify files for production. see my comment above.

@daneden I would recommend doing both, it will be easier to maintain the animations in the long run if you have everything split into different files (specially since the classes and animations aren't grouped together) renaming/editing animations can become tricky and a huge chance of being out-of-sync (ie: update -webkit-keyframes and forget to update -moz-keyframes, keyframes or the class). It will also make it easier to code the "custom build tool" since you can simply read the whole content of separate files and merge them.

from animate.css.

@millermedeiros Aye, totally agree! Would make that build tool even easier.

from animate.css.

@millermederios I'm writing a custom build tool as we speak. Going to create separate files for the animations as well as a combined minified file.

How should the rules be grouped? For example:

• broad grouping (eg all fadeIns and fadeOuts together)
• grouping (fadeIns and fadeOuts separately) OR
• complete independence (every animation has a separate file)

from animate.css.

Files have been split, found in the 'source' directory. Custom build tool now available too at http://daneden.me/animate/build

from animate.css.