Postcss plugin to allow for keyframes to be inverted.
npm install 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);
}
}
`
`js``
postcss([ require('postcss-invert-keyframes') ])
See [PostCSS] docs for examples for your environment.