README.md in animatecss-0.0.1 vs README.md in animatecss-0.0.2
- old
+ new
@@ -1,25 +1,142 @@
# Animatecss
-TODO: Adds animatecss library goodies to your pipeline
+Adds animatecss library goodies to your pipeline.
+Live examples could be found at: http://daneden.me/animate/
+
+Animate css is an open source css library developed by: Daniel Eden (daneden).
+
## Installation
Add this line to your application's Gemfile:
gem 'animatecss'
And then execute:
- $ bundle
+ $ bundle install
Or install it yourself as:
$ gem install animatecss
+
+Add it to the application.css.scss (Ruby on Rails):
+ *= require animate
+
## Usage
-TODO: Write usage instructions here
+To use animate.css in your website, simply drop the stylesheet into your document's `<head>`, and add the class `animated` to an element, along with any of the animation names. That's it! You've got a CSS animated element. Super!
+
+You can do a whole bunch of other stuff with animate.css when you combine it with jQuery or add your own CSS rules. Dynamically add animations using jQuery with ease:
+
+```javascript
+$('#yourElement').addClass('animated bounceOutLeft');
+```
+
+You can change the duration of your animations, add a delay or change the number of times that it plays!
+
+```css
+#yourElement {
+ -vendor-animation-duration: 3s;
+ -vendor-animation-delay: 2s;
+ -vendor-animation-iteration-count: infinite;
+}
+```
+
+*Note: be sure to replace "vendor" in the CSS with the applicable vendor prefixes (webkit, moz, ms, o)*
+
+*Note: Safari in Mountion Lion (OS 10.8) has a display glitch with the Flippers. They may not appear at all until the animation is completed, or the page may have other artifacting. One fix is to add overflow: hidden to the parent div.*
+
+##License
+Animate.css is licensed under the ☺ license. (http://licence.visualidiot.com/)
+
+##Learn more
+You can learn more about animate.css over at http://daneden.me/animate
+You can also get in touch via email (dan.eden@me.com) or twitter (@_dte) if you need any help or have any issues.
+
+##Cheat Sheet
+
+####Attention seekers:
+flash
+bounce
+shake
+tada
+swing
+wobble
+wiggle
+pulse
+
+####Flippers (currently Webkit, Firefox, & IE10 only):
+flip
+flipInX
+flipOutX
+flipInY
+flipOutY
+
+####Fading entrances:
+fadeIn
+fadeInUp
+fadeInDown
+fadeInLeft
+fadeInRight
+fadeInUpBig
+fadeInDownBig
+fadeInLeftBig
+fadeInRightBig
+
+####Fading exits:
+fadeOut
+fadeOutUp
+fadeOutDown
+fadeOutLeft
+fadeOutRight
+fadeOutUpBig
+fadeOutDownBig
+fadeOutLeftBig
+fadeOutRightBig
+
+####Bouncing entrances:
+bounceIn
+bounceInDown
+bounceInUp
+bounceInLeft
+bounceInRight
+
+####Bouncing exits:
+bounceOut
+bounceOutDown
+bounceOutUp
+bounceOutLeft
+bounceOutRight
+
+####Rotating entrances:
+rotateIn
+rotateInDownLeft
+rotateInDownRight
+rotateInUpLeft
+rotateInUpRight
+
+####Rotating exits:
+rotateOut
+rotateOutDownLeft
+rotateOutDownRight
+rotateOutUpLeft
+rotateOutUpRight
+
+####Lightspeed:
+lightSpeedIn
+lightSpeedOut
+
+####Specials:
+hinge
+rollIn
+rollOut
+
+## Other Resources
+
+- There's another [Ruby gem](https://github.com/camelmasa/animate-rails) available for Animate.css
## Contributing
1. Fork it
2. Create your feature branch (`git checkout -b my-new-feature`)