KO | EN

GitLite

Minimalist Open Source Repository Search Engine

gitlite — search

#dsh #dsh-plugin #ai-agent #developer-tools #codex #typescript #cli #deepseek-harness #claude-code #ai-agents #mcp #rust

font-awesome-animation

★ 914 Open GitHub ↗

Simple animations using FontAwesome and some CSS3.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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

```

### On hover

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

```html

```

### 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">
 &nbsp;hover mouse here
</a>
```

<a href="#" class="faa-parent animated-hover">
&nbsp;hover mouse here
</a>

### Animation speed

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

```html


```

&nbsp;fast&nbsp;
&nbsp;slow

## Animation list

Check the [Github page](https://l-lin.github.io/font-awesome-animation/#animation-list) to view the
previews.

| Animation | Preview | Fast | Slow |
|-----------|---------|------|------|
|`faa-wrench`||||
|`faa-ring`||||
|`faa-horizontal`||||
|`faa-horizontal faa-reverse`||||
|`faa-vertical`||||
|`faa-flash`||||
|`faa-bounce`||||
|`faa-bounce faa-reverse`||||
|`faa-spin`||||
|`faa-spin faa-reverse`||||
|`faa-float`||||
|`faa-pulse`||||
|`faa-shake`||||
|`faa-tada`||||
|`faa-passing`||||
|`faa-passing faa-reverse`||||
|`faa-burst`||||
|`faa-falling`||||
|`faa-falling faa-reverse`||||
|`faa-rising`||||

## Development
### Build

```bash
# install dependencies
npm install

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

### Local preview

To test in local, you can use:

- [http-server][]: server local http server to the `css/` folder
- any markdown preview to serve this README.md as a webpage (e.g. [markdown-preview.nvim][])

### Release

```sh
# this will create a new version and push to remote repository
npm version [<newversion> | major | minor | patch]
```

Then go to the [release page](https://github.com/l-lin/font-awesome-animation/releases) and manually
create a new release. There is an automatic [Github action](./.github/workflows/publish.yml) that
publishes automatically to NPM repository.

## License

[MIT License](LICENSE)

[cdn-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation
[FontAwesome]: https://fontawesome.com/
[http-server]: https://www.npmjs.com/package/http-server
[markdown-preview.nvim]: https://github.com/iamcco/markdown-preview.nvim
[npm-link]: https://www.npmjs.com/package/font-awesome-animation

font-awesome-animation

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README