PostCSS plugin that adds `@Keyframes` from animate.css.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.editorconfig
.gitignore
.travis.yml
README.md
gulpfile.js
index.js
package.json

README.md

PostCSS animation

NPM version Build Status Dependency Status

PostCSS PostCSS plugin that adds @keyframes from animate.css.

.foo {
  animation-name: bounce;
}
.foo {
  animation-name: bounce;
}
@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);
  }
  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);
  }
  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);
  }
  90% {
    transform: translate3d(0,-4px,0);
  }
}

--

Usage

postcss([ require('postcss-animation') ])

See PostCSS docs for examples for your environment.

gulp

see this example

--

License

MIT © zhouwenbin

--

Thanks

animate.css