Skip to content

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.

Notifications You must be signed in to change notification settings

jpgorman/postcss-invert-keyframes

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

51 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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.

About

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.

Topics

Resources

Stars

Watchers

Forks

Packages

No packages published