<commit_before># font-awesome-animation 

> Simple animations using some CSS3 I found on the web.
> Best used on glyphicons like [FontAwesome][]

![build](https://github.com/l-lin/font-awesome-animation/workflows/build/badge.svg)
[![npm](https://img.shields.io/npm/v/font-awesome-animation.svg)][npm-link]
[![npm](https://img.shields.io/npm/dm/font-awesome-animation.svg)][npm-link]
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/font-awesome-animation/badge?style=rounded)][cdn-link]

## Getting started

Install from NPM:

```bash
npm install font-awesome-animation
```

Or with a CDN:

[https://www.jsdelivr.com/package/npm/font-awesome-animation][cdn-link]

Include CSS file in your index.html file:

```html
<link rel="stylesheet" href="font-awesome-animation.min.css">
```

## Usage

See [live demo](https://l-lin.github.com/font-awesome-animation).

## Development

```bash
# install dependencies
npm install

# generate prefixes and minified CSS files
npm run build
```

## License

[MIT License](LICENSE)

[FontAwesome]: https://fontawesome.com/
[npm-link]: https://www.npmjs.com/package/font-awesome-animation
[cdn-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation

<commit_msg>doc: add usage<commit_after># font-awesome-animation 

> Simple animations using some CSS3 I found on the web.
> Best used on glyphicons like [FontAwesome][]

![build](https://github.com/l-lin/font-awesome-animation/workflows/build/badge.svg)
[![npm](https://img.shields.io/npm/v/font-awesome-animation.svg)][npm-link]
[![npm](https://img.shields.io/npm/dm/font-awesome-animation.svg)][npm-link]
[![jsdelivr](https://data.jsdelivr.com/v1/package/npm/font-awesome-animation/badge?style=rounded)][cdn-link]

## Getting started

Install from NPM:

```bash
npm install font-awesome-animation
```

Or with a CDN:

[https://www.jsdelivr.com/package/npm/font-awesome-animation][cdn-link]

Include CSS file in your index.html file:

```html
<link rel="stylesheet" href="font-awesome-animation.min.css">
```

## Usage
### On DOM load

Add the desired CSS class `faa-xxx` along with `animated` to the icon (or any element of your DOM):

```html
<i class="fa fa-wrench faa-wrench animated"></i>
```

### On hover

Instead of using `animated`, use the `animated-hover` CSS class:

```html
<i class="fa fa-wrench faa-wrench animated-hover"></i>
```

### On parent element hover

For parent hover, add the CSS class `faa-parent` and `animated-hover` on the parent element:

```html
<a href="#" class="faa-parent animated-hover">
  <i class="fa fa-wrench faa-wrench"></i>
</a>
```

You can regulate the speed of the animation by adding the CSS class `faa-fast` or `faa-slow`:

```html
<i class="fa fa-wrench faa-wrench animated faa-fast"></i>
<i class="fa fa-wrench faa-wrench animated faa-slow"></i>
```

## Development

```bash
# install dependencies
npm install

# generate prefixes and minified CSS files
npm run build
```

## License

[MIT License](LICENSE)

[FontAwesome]: https://fontawesome.com/
[npm-link]: https://www.npmjs.com/package/font-awesome-animation
[cdn-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation


{'fraction_non_alphanumeric': 0.17171073590315386, 'fraction_numerical': 0.0012742911755336094, 'mean_word_length': 4.78268876611418, 'pattern_counts': {'":': 0, '<': 17, '<?xml version=': 0, '>': 21, 'https://': 17, 'lorem ipsum': 0, 'www.': 6, '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': '1476080', 'n_tokens_mistral': 1187, 'n_tokens_neox': 1102, 'n_words': 250}