# chip-animate

> Libreria css de animaciones

Latest version **0.0.12** (published 2019-04-28) · GPL-2 license · 0 weekly downloads

## Install

```sh
npm install chip-animate
pnpm add chip-animate
yarn add chip-animate
bun add chip-animate
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2019-04-28 |
| First published | 2019-04-28 |
| Weekly downloads | 0 |
| License | GPL-2 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Alex Chip |
| Maintainers | alex_chip |

## Links

- npm: https://www.npmjs.com/package/chip-animate
- npm.io page: https://npm.io/package/chip-animate

## Recent versions

- 0.0.12 (latest) — 2019-04-28
- 0.0.1 — 2019-04-28

## README

# Libreria CSS de Animaciones

Es una libreria de animaciones empaquetados en mixins de Sass. Esta inspirado en animate.css

## Como usarlo?

Puedes usar Animate con CSS o con SASS(recomendado)

### Con CSS

Descarga el archivo ``public/css/animate.css`` e incluyelo en tu proyecto.

Luego puedes agregar las siguientes clases a los elementos que deseas que se animen.



```scss
.fade-in
.fade-out
.slide-left
.slide-right
.slide-top
.slide-bottom
.slide-down
.slide-up
.zoom-in
.zoom-out
.bounce-left
.bounce-right
.bounce-top
.bounce-bottom
.animated-bordes
```



### Con Sass

* Instale Animate con el comand ``npm intall --save-dev animate``
* Importe ``animate/animate`` en su proyecto.
* Establezca la variable ``animateHelpers: false`` para compilar solo lo necesario (debe hacerlo antes de importar animate).
* Los mixins disponibles son:

```scss
fadeIn($time)
fadeOut($time)
slideLeft($time)
slideRight($time)
slideTop($time)
slideBottom($time)
slideDown($time, $height)
slideUp($time, $height)
zoomIn($time)
zoomOut($time)
bounceLeft($time)
bounceRight($time)
bounceTop($time)
bounceBottom($time)
animatedBordes($time, $color)
```

---
_Source: https://npm.io/package/chip-animate · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._