<commit_before># react-web-animation

react-web-animation is a set of React components that expose the Web Animations API
in a declarative way.

<p align="center">
  <img src="https://github.com/RinconStrategies/react-web-animation/blob/master/react_gif.gif" />
</p>


[![build status](https://travis-ci.org/bringking/react-web-animation.svg?branch=master)](https://travis-ci.org/bringking/react-web-animation)
[![npm version](https://img.shields.io/npm/v/react-web-animation.svg?style=flat-square)](https://www.npmjs.com/package/react-web-animation)
[![npm downloads](https://img.shields.io/npm/dm/react-web-animation.svg?style=flat-square)](https://www.npmjs.com/package/react-web-animation)


## Demos
Check out how you can use it here - [http://react-web-animation.surge.sh](http://react-web-animation.surge.sh)

## Why?

Why use this over other animation libraries for React? react-web-animation uses the Web Animations API polyfill so
eventually it will use the native browser implementation and not depend on any third-party animation frameworks or CSS.
Chrome has the greatest support for these today and if you view the source on the demos, you can see it isn't using CSS at all!

## Web Animations API<commit_msg>docs(repo): Update readme with badges<commit_after># react-web-animation

react-web-animation is a set of React components that expose the Web Animations API
in a declarative way.

<p align="center">
  <img src="https://github.com/RinconStrategies/react-web-animation/blob/master/react_gif.gif" />
</p>


[![build status](https://travis-ci.org/bringking/react-web-animation.svg?branch=master)](https://travis-ci.org/bringking/react-web-animation)
[![npm version](https://img.shields.io/npm/v/react-web-animation.svg?style=flat-square)](https://www.npmjs.com/package/react-web-animation)
[![npm downloads](https://img.shields.io/npm/dm/react-web-animation.svg?style=flat-square)](https://www.npmjs.com/package/react-web-animation)
[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)
[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)


## Demos
Check out how you can use it here - [http://react-web-animation.surge.sh](http://react-web-animation.surge.sh)

## Why?

Why use this over other animation libraries for React? react-web-animation uses the Web Animations API polyfill so
eventually it will use the native browser implementation and not depend on any third-party animation frameworks or CSS.
Chrome has the greatest support for these today and if you view the source on the demos, you can see it isn't using CSS at all!

## Web Animations API
{'fraction_non_alphanumeric': 0.14327062228654125, 'fraction_numerical': 0.006874095513748191, 'mean_word_length': 4.971922246220302, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 9, 'https://': 17, 'lorem ipsum': 0, 'www.': 4, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 2, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '2154796', 'n_tokens_mistral': 919, 'n_tokens_neox': 877, 'n_words': 216}