https://github.com/zhouwenbin/postcss-animation

PostCSS plugin that adds `@keyframes` from animate.css.
https://github.com/zhouwenbin/postcss-animation

Last synced: 3 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/zhouwenbin/postcss-animation
• Owner: zhouwenbin
• Created: 2015-11-25T04:49:53.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-03-07T02:53:14.000Z (almost 8 years ago)
• Last Synced: 2024-11-04T16:45:08.107Z (4 months ago)
• Language: JavaScript
• Homepage:
• Size: 32.2 KB
• Stars: 82
• Watchers: 2
• Forks: 5
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# PostCSS animation

[![NPM version][npm-image]][npm-url] [![Build Status][travis-image]][travis-url] [![Dependency Status][daviddm-image]][daviddm-url]

[PostCSS][PostCSS] PostCSS plugin that adds `@keyframes` from [animate.css](https://github.com/daneden/animate.css).

```css

.foo {

  animation-name: bounce;

}

```

```css

.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

```js

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

```

See [PostCSS][PostCSS] docs for examples for your environment.

### gulp

see this [example](https://github.com/zhouwenbin/postcss-animation-example)

--

### License

MIT © [zhouwenbin](http://zhouwenbin.com)

--

### Thanks

[animate.css](https://github.com/daneden/animate.css)

[npm-image]: https://badge.fury.io/js/postcss-animation.svg

[npm-url]: https://npmjs.org/package/postcss-animation

[travis-image]: https://travis-ci.org/zhouwenbin/postcss-animation.svg?branch=master

[travis-url]: https://travis-ci.org/zhouwenbin/postcss-animation

[daviddm-image]: https://david-dm.org/zhouwenbin/postcss-animation.svg?theme=shields.io

[daviddm-url]: https://david-dm.org/zhouwenbin/postcss-animation

[PostCSS]: https://github.com/postcss/postcss