PostCSS plugin that adds @Keyframes from Magic Animations | v0.3.0
JavaScript
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
test
.editorconfig
.gitignore
.npmignore
.travis.yml
CHANGELOG.md
LICENSE
README.md
index.js
magic.gif
package.json

README.md

PostCSS Magic Animations Build Status

PostCSS plugin that adds @keyframes from Magic Animations

Screen

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