# web-animations-js

> JavaScript implementation of the Web Animations API

Latest version **2.3.2** (published 2019-06-25) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install web-animations-js
pnpm add web-animations-js
yarn add web-animations-js
bun add web-animations-js
```

## Health

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

Positive: has types package; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 2.3.2 |
| Published | 2019-06-25 |
| First published | 2015-10-26 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | separate (@types/web-animations-js) |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 409.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 3777 |
| Maintainers | alancutter, ericwilligers, samthor |
| Keywords | animations, polyfill |

## Links

- npm: https://www.npmjs.com/package/web-animations-js
- Repository: https://github.com/web-animations/web-animations-js
- Homepage: https://github.com/web-animations
- Issues: https://github.com/web-animations/web-animations-js/issues
- npm.io page: https://npm.io/package/web-animations-js

## 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

- 2.3.2 (latest) — 2019-06-25
- 2.3.1 — 2017-07-20
- 2.3.0 — 2017-07-20
- 2.2.5 — 2017-04-20
- 2.2.4 — 2017-04-15
- 2.2.3 — 2017-04-13
- 2.2.2 — 2016-08-03
- 2.2.1 — 2016-04-29
- 2.1.5 — 2016-04-21
- 2.2.0 — 2016-04-06
- 2.1.4 — 2015-12-03
- 2.1.3 — 2015-10-26

## README

What is Web Animations?
-----------------------

A new JavaScript API for driving animated content on the web. By unifying
the animation features of SVG and CSS, Web Animations unlocks features
previously only usable declaratively, and exposes powerful, high-performance
animation capabilities to developers.

What is in this repository?
---------------------------

A JavaScript implementation of the Web Animations API that provides Web
Animation features in browsers that do not support it natively. The polyfill
falls back to the native implementation when one is available.

Quick start
-----------

Here's a simple example of an animation that fades and scales a `<div>`.  
[Try it as a live demo.](http://jsbin.com/yageyezabo/edit?html,js,output)

```html
<!-- Include the polyfill -->
<script src="web-animations.min.js"></script>

<!-- Set up a target to animate -->
<div class="pulse" style="width: 150px;">Hello world!</div>

<!-- Animate! -->
<script>
    var elem = document.querySelector('.pulse');
    var animation = elem.animate({
        opacity: [0.5, 1],
        transform: ['scale(0.5)', 'scale(1)'],
    }, {
        direction: 'alternate',
        duration: 500,
        iterations: Infinity,
    });
</script>
```

Documentation
-------------

* [Codelab tutorial](https://github.com/web-animations/web-animations-codelabs)
* [Examples of usage](/docs/examples.md)
* [Live demos](https://web-animations.github.io/web-animations-demos)
* [MDN reference](https://developer.mozilla.org/en-US/docs/Web/API/Element/animate)
* [W3C specification](https://drafts.csswg.org/web-animations/)

We love feedback!
-----------------

* For feedback on the API and the specification:
    * File an issue on GitHub: <https://github.com/w3c/web-animations/issues/new>
    * Alternatively, send an email to <public-fx@w3.org> with subject line
"[web-animations] ... message topic ..."
([archives](http://lists.w3.org/Archives/Public/public-fx/)).

* For issues with the polyfill, report them on GitHub:
<https://github.com/web-animations/web-animations-js/issues/new>.

Keep up-to-date
---------------

Breaking polyfill changes will be announced on this low-volume mailing list:
[web-animations-changes@googlegroups.com](https://groups.google.com/forum/#!forum/web-animations-changes).

More info
---------

* [Technical details about the polyfill](/docs/support.md)
    * [Browser support](/docs/support.md#browser-support)
    * [Fallback to native](/docs/support.md#native-fallback)
    * [Feature list](/docs/support.md#features)
    * [Feature deprecation and removal processes](/docs/support.md#process-for-breaking-changes)
* To test experimental API features, try one of the
  [experimental targets](/docs/experimental.md)

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