https://github.com/nucliweb/postcss-magic-animations
PostCSS plugin that adds @keyframes from Magic Animations | v0.3.0
https://github.com/nucliweb/postcss-magic-animations
Last synced: 8 months ago
JSON representation
PostCSS plugin that adds @keyframes from Magic Animations | v0.3.0
- Host: GitHub
- URL: https://github.com/nucliweb/postcss-magic-animations
- Owner: nucliweb
- License: mit
- Created: 2016-04-25T18:36:21.000Z (almost 10 years ago)
- Default Branch: master
- Last Pushed: 2017-02-20T22:41:13.000Z (almost 9 years ago)
- Last Synced: 2025-04-14T17:11:52.653Z (10 months ago)
- Language: JavaScript
- Homepage:
- Size: 692 KB
- Stars: 41
- Watchers: 5
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
# PostCSS Magic Animations [![Build Status][ci-img]][ci]
[PostCSS]: https://github.com/postcss/postcss
[ci-img]: https://travis-ci.org/nucliweb/postcss-magic-animations.svg
[ci]: https://travis-ci.org/nucliweb/postcss-magic-animations
[PostCSS](https://github.com/postcss/postcss/) plugin that adds `@keyframes` from [Magic Animations](https://github.com/miniMAC/magic)
#### Input
```css
.animation {
animation-name: magic;
}
```
#### Output
```css
.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
```js
postcss([ require('postcss-magic-animations') ])
```
See [PostCSS](https://github.com/postcss/postcss) docs for examples for your environment.
## Options
Call plugin function to set options:
```js
postcss([ require('postcss-magic-animations({atRoot: true})') ])
```
### `atRoot`
Defines `atRoot: true` to prevent the `@keyframes` can be nested in a **media queries**
#### Input
```css
@media only screen and (min-width: 600px) {
.animation {
animation-name: magic;
}
}
```
#### Output
```css
@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](https://github.com/miniMAC) for [magic](https://github.com/miniMAC/magic)
* [@zhouwenbin](https://github.com/zhouwenbin) for the inspiration with [PostCSS Animation](https://github.com/zhouwenbin/postcss-animation)
* [@carlosvillu](https://github.com/carlosvillu) for the help to get a ninja code