Neanderthal Painting Monet

    postcss-magic-animations

    0.3.0 • Public • Published

    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(11) rotate(0deg);
      }
      100% {
        opacity: 0;
        transform-origin: 200% 500%;
        transform: scale(00) 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(11) rotate(0deg);
      }
      100% {
        opacity: 0;
        transform-origin: 200% 500%;
        transform: scale(00) rotate(270deg);
      }
    }
     

    Thanks

    Install

    npm i postcss-magic-animations

    DownloadsWeekly Downloads

    27

    Version

    0.3.0

    License

    MIT

    Last publish

    Collaborators

    • nucliweb