# @vace/animations

> CSS animations

Latest version **0.0.3** (published 2022-09-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install @vace/animations
pnpm add @vace/animations
yarn add @vace/animations
bun add @vace/animations
```

## Health

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

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2022-09-05 |
| First published | 2022-09-04 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 482.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Vace |
| Maintainers | vace |

## Links

- npm: https://www.npmjs.com/package/@vace/animations
- Repository: https://github.com/vace/animations
- Homepage: https://github.com/vace/animations#readme
- Issues: https://github.com/vace/animations/issues
- npm.io page: https://npm.io/package/@vace/animations

## Recent versions

- 0.0.3 (latest) — 2022-09-05
- 0.0.2 — 2022-09-04
- 0.0.1 — 2022-09-04

## README

# @vace/animations

CSS animations

## Usage

**import all animations css**

```js
import '@vace/animations/animations.css'
```

```html
<div class="ani-fade-in"></div>
```

**import all animations json config**

```js
import animations from '@vace/animations/animations.json'
```

**create css code from json config**

```js
import { animations, stringify } from '@vace/animations'

/**
 * @keyframes ani-fade-in { ...
 * .ani-fade-in {
 *   animation: var(--animate-duration, 1s) infinite both ani-fade-in
 * }
 */
const csscode = stringify(animations[0], { prefix: 'ani' })
// or
const csscode = stringify('fade-in', { prefix: 'ani' })
```

## animation decorator

- `@global` file config
- `@delay` : 'animationDelay'
- `@direction` : 'animationDirection'
- `@duration` : 'animationDuration'
- `@mode` : 'animationFillMode'
- `@count` : 'animationIterationCount'
- `@state` : 'animationPlayState'
- `@easeing` : 'animationTimeingFunction'
- `@backface` : 'backfaceVisibility'

## prefix

- `text-*` text animation (letter-spacing,text-shadow)
- `bg-*` background animation (background-color,background-position)
- `ccw` counterclockwise
- `fwd` forward
- `bck`  back
- `diag` diagonal
- `*-l` left
- `*-r` right
- `*-t` top
- `*-b` bottom

## Credits

- [animate.css](https://github.com/animate-css/animate.css)
- [animista.net](https://animista.net)

## License

This project is licensed under the [MIT License](https://opensource.org/licenses/MIT).

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