postcss-invert-keyframes

Postcss plugin to allow for keyframes to be inverted.

Usage no npm install needed!

<script type="module">
  import postcssInvertKeyframes from 'https://cdn.skypack.dev/postcss-invert-keyframes';
</script>

README

Build Status npm version

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.