# scss-animate

> A SASS port of Dan Eden's Animate.css

Latest version **0.0.2** (published 2017-04-30) · MIT license · 0 weekly downloads

## Install

```sh
npm install scss-animate
pnpm add scss-animate
yarn add scss-animate
bun add scss-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.2 |
| Published | 2017-04-30 |
| First published | 2017-04-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Wellington Barreto |
| Maintainers | zeindelf |
| Keywords | animate.scss, animate.css, animate |

## Links

- npm: https://www.npmjs.com/package/scss-animate
- Repository: https://github.com/Zeindelf/scss-animate
- Homepage: https://github.com/Zeindelf/scss-animate#readme
- Issues: https://github.com/Zeindelf/scss-animate/issues
- npm.io page: https://npm.io/package/scss-animate

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.0.2 (latest) — 2017-04-30
- 0.0.1 — 2017-04-30

## README

# SCSS Animate

Mais um port da Animate.css para SASS...

## Como Importar

```scss
// Importando as propriedades necessárias
@import 'path/to/directory/_properties';

// Importando as animações
@import 'path/to/directory/attention-seekers/attention-seekers.scss';
```

## Como Usar

```scss
.sua-classe-css {
    @include bounce();
}
```

Os mixins contém opções configuráveis para customizar suas animações:

`count`, `duration`, `delay`, `function`, `fill` e `visibility`

---

#### Valores Padrão

**$count:** Determina o número de vezes que a animação vai se repetir. Para deixar a animação repetindo infinitamente, informe o valor 'infinite'. `Default: 1`

**$duration:** Quanto tempo, em segundos (s) ou milisegundos (ms), durará um ciclo da animação. `Default: 0`

**$delay:** Define a partir de quanto tempo a animação vai se iniciar. `Default: 0`

**$function:** Forma como a animação progride no tempo. `Default: ease`

**$fill:** Especifica como uma animação CSS deve aplicar estilos ao seu destino antes e depois que ele está sendo executado. `Default: both`

**$visibility:** Determina se deve ser exibido ou não a parte de trás do elemento para o usuário. `Default: hidden`

```scss
// Incluindo o mixin com as opções
.sua-classe-css {
    @include bounce(
        $count: infinite,
        $duration: 1s,
        $delay: .2s,
        $function: ease,
        $fill: both,
        $visibility: hidden
    );
}
```
---

#### Prehistoric Mode

Se você não estiver usando um prefixer, ative o modo pré-histórico mudando a variável `$prehistoric-mode` para `true`

## Licenças

Como nos originais, sob a [Licença MIT](http://opensource.org/licenses/MIT).

## Créditos

Dan Eden's [Animate.css](https://github.com/daneden/animate.css)

Geoff Graham's [Animate.scss](https://github.com/geoffgraham/animate.scss)

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