#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.
#Installation
npm i postcss-invert-keyframes --save-dev#Example
/* Input example */
@-invert-keyframes test {
0%, 10%{
transform: translate3d(0, 0, 0);
}
50% {
transform: translate3d(190px, 0, 0);
}
100%{
transform: translate3d(150px, 0, 0);
}
}/* 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
postcss([ require('postcss-invert-keyframes') ])See PostCSS docs for examples for your environment.