Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/l-lin/font-awesome-animation

Simple animations using FontAwesome and some CSS3.
https://github.com/l-lin/font-awesome-animation

List: font-awesome-animation

animations css3 font-awesome

Last synced: 29 days ago
JSON representation

Simple animations using FontAwesome and some CSS3.

Awesome Lists containing this project

README

        

# 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

```

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

 hover mouse here

```


 hover mouse here

### Animation speed

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

```html


```

 fast 
 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 [ | 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