Stylie is a fun tool for easily creating CSS 3 animations. Quickly design your animation graphically, grab the generated CSS and go! To learn how to use the app, either run it locally (see below) or go to http://jeremyckahn.github.io/stylie/ and click the "?" icon in the header for a manual.

Requirements:

• NodeNodeJS/NPM,
• Bower (version 1.0 or above)
• Grunt
• Sass and Compass

Clone this repo and install the dependencies:

npm install && bower install

To run the app:

grunt serve

You can now access Stylie from http://localhost:9000.

Note: The whole build process is sort of crazy, and it doesn't follow any patterns in particular. The current setup is engineered around a project goal to just be able open the top-level index.html file and start using the app. It's also designed around running statically as a Github pages site. If you have an idea on how to engineer the build system in a cleaner way, please make a Pull Request or a suggestion on the issue tracker.

Stylie is open source, so you are welcome to make changes. If you do, you'll want to use dev.html, not index.html. The latter is generated by the build process.

You can build the project with:

grunt build

Ta-da! The JavaScript binary (bin/app.js), CSS, and index.html will be generated. Aside from the JavaScript, dev.html and index.html share all of the same asset files.

I can't design things, but I know people that can. The overall look of the app is courtesy of Jon Victorino. The Help icon was masterfully crafted by @nrrrdcore.

Stylie is distributed under an MIT license. You are encouraged to use and modify the code to suit your needs, as well as redistribute it.