postcss-magic-animations
v0.3.0
Published
PostCSS plugin that adds @keyframes from Magic Animations
Downloads
27
Maintainers
Readme
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 PosCSS Animation
- @carlosvillu for the help to get a ninja code