Animate.css Snippets for Sublime Text

A collection of snippets from Animate.css for Sublime Text.

Usage

In Sublime Text, enter animatecss- followed by an animation name as listed on Animate.css. Then hit the Tab key to generate the aniamtion code. For example:

animatecss-bounceOutDown

Will generate:

@-webkit-keyframes bounceOutDown {
  0% {
    -webkit-transform: translateY(0);
    transform: translateY(0);
  }

  20% {
    opacity: 1;
    -webkit-transform: translateY(-20px);
    transform: translateY(-20px);
  }

  100% {
    opacity: 0;
    -webkit-transform: translateY(2000px);
    transform: translateY(2000px);
  }
}

...

.bounceOutDown {
  -webkit-animation-name: bounceOutDown;
  animation-name: bounceOutDown;
}

Installation

The easiest method is to use Package Control. In Sublime Text, press Cmd+Shift+P on OS X or Ctrl+Shift+P on Windows/Linux, then go to "Package Control:Install Package". Search for "Animate.css", and hit Enter to install.

License

Animate.css Snippets for Sublime Text is licensed under MIT. (http://opensource.org/licenses/MIT)

Credits

• Andrew Deniszczyc - Animate.css Snippets for Sublime Text
• Daniel Eden - Animate.css