mirror of
https://github.com/animate-css/animate.css.git
synced 2024-11-18 01:50:36 +01:00
56 lines
1.9 KiB
Markdown
56 lines
1.9 KiB
Markdown
## Custom Builds
|
||
|
||
<p class="warning">Custom builds are not possible from a node_modules folder as we don't ship the building tools in the npm module.</p>
|
||
|
||
Animate.css is powered by npm, postcss + postcss-preset-env, which means you can create custom builds pretty easily, using future CSS with proper fallbacks.
|
||
|
||
First of all, you’ll need Node and all other dependencies:
|
||
|
||
```shell
|
||
$ git clone https://github.com/animate-css/animate.css.git
|
||
$ cd animate.css
|
||
$ npm install
|
||
```
|
||
|
||
Next, run `npm start` to compile your custom build. Three files will be generated:
|
||
|
||
- `animate.css`: raw build, easy to read and without any optimization
|
||
- `animate.min.css`: minified build ready for production
|
||
- `animate.compat.css`: minified build ready for production **without class prefix**. This should only be used as an easy path for migrations.
|
||
|
||
For example, if you'll only use some of the “attention seekers” animations, simply edit the `./source/animate.css` file, delete every `@import`, and add the ones you want to use.
|
||
|
||
```css
|
||
@import 'attention_seekers/bounce.css';
|
||
@import 'attention_seekers/flash.css';
|
||
@import 'attention_seekers/pulse.css';
|
||
@import 'attention_seekers/rubberBand.css';
|
||
@import 'attention_seekers/shake.css';
|
||
@import 'attention_seekers/headShake.css';
|
||
@import 'attention_seekers/swing.css';
|
||
@import 'attention_seekers/tada.css';
|
||
@import 'attention_seekers/wobble.css';
|
||
@import 'attention_seekers/jello.css';
|
||
@import 'attention_seekers/heartBeat.css';
|
||
```
|
||
|
||
Now, just run `npm start` and your highly optimized build will be generated at the root of the project.
|
||
|
||
### Changing the default prefix
|
||
|
||
It's pretty straight forward to change animate's prefix on your custom build. Change the `animateConfig`'s `prefix` property in the `package.json` file and rebuild the library with `npm start`:
|
||
|
||
```json
|
||
/* on Animate.css package.json */
|
||
"animateConfig": {
|
||
"prefix": "myCustomPrefix__"
|
||
},
|
||
```
|
||
|
||
then:
|
||
|
||
```shell
|
||
$ npm start
|
||
```
|
||
|
||
Easy peasy!
|