https://github.com/jpgorman/postcss-invert-keyframes
PostCss plugin that takes a keyframe animation and duplicates it, with a reversed or mirror version. This creates a reverse of the given keyframe animation.
https://github.com/jpgorman/postcss-invert-keyframes
keyframe-animation keyframes postcss postcss-plugin reverse
Last synced: 3 days ago
JSON representation
PostCss plugin that takes a keyframe animation and duplicates it, with a reversed or mirror version. This creates a reverse of the given keyframe animation.
- Host: GitHub
- URL: https://github.com/jpgorman/postcss-invert-keyframes
- Owner: jpgorman
- Created: 2016-05-13T12:42:54.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2016-05-17T20:19:55.000Z (about 10 years ago)
- Last Synced: 2025-09-24T19:28:15.585Z (9 months ago)
- Topics: keyframe-animation, keyframes, postcss, postcss-plugin, reverse
- Language: JavaScript
- Size: 44.9 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
[](https://travis-ci.org/jpgorman/postcss-invert-keyframes)
[](https://badge.fury.io/js/postcss-invert-keyframes)
#PostCSS plugin invert-keyframes
[PostCSS] plugin that copies as set of keyframes, copies them and then adds an inverted version so that the animation can be reversed.
[PostCSS]: https://github.com/postcss/postcss
#Installation
```sh
npm i postcss-invert-keyframes --save-dev
```
#Example
```css
/* Input example */
@-invert-keyframes test {
0%, 10%{
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(190px, 0, 0);
}
100%{
transform: translate3d(150px, 0, 0);
}
}
```
```css
/* Output example */
@keyframes test {
0%, 10%{
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(190px, 0, 0);
}
100%{
transform: translate3d(150px, 0, 0);
}
}
@keyframes test-inverted {
0%{
transform: translate3d(150px, 0, 0);
}
50% {
transform: translate3d(190px, 0, 0);
}
100%, 90%{
transform: translate3d(0, 0, 0);
}
}
```
## Usage
```js
postcss([ require('postcss-invert-keyframes') ])
```
See [PostCSS] docs for examples for your environment.