PostCSS Magic Animations

PostCSS plugin that adds @keyframes from Magic Animations

Input

.animation {
  animation-name: magic;
}

Output

.animation {
  animation-name: magic;
}
@keyframes magic {
  0% {
    opacity: 1;
    transform-origin: 100% 200%;
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 500%;
    transform: scale(0, 0) rotate(270deg);
  }
}

Install

npm install postcss-magic-animations --save-dev

Usage

postcss([ require('postcss-magic-animations') ])

See PostCSS docs for examples for your environment.

Options

Call plugin function to set options:

postcss([ require('postcss-magic-animations({atRoot: true})') ])

atRoot

Defines atRoot: true to prevent the @keyframes can be nested in a ​media queries

Input

@media only screen and (min-width: 600px) {
  .animation {
    animation-name: magic;
  }
}

Output

@media only screen and (min-width: 600px) {
  .animation {
    animation-name: magic;
  }
}
@keyframes magic {
  0% {
    opacity: 1;
    transform-origin: 100% 200%;
    transform: scale(1, 1) rotate(0deg);
  }
  100% {
    opacity: 0;
    transform-origin: 200% 500%;
    transform: scale(0, 0) rotate(270deg);
  }
}

Thanks

• @miniMAC for magic
• @zhouwenbin for the inspiration with PostCSS Animation
• @carlosvillu for the help to get a ninja code