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

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

animations css3 font-awesome

Last synced: 11 days ago
JSON representation

Simple animations using FontAwesome and some CSS3.

• Host: GitHub
• URL: https://l-lin.github.io/font-awesome-animation/
• Owner: l-lin
• License: mit
• Created: 2014-01-21T21:56:12.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2024-06-16T18:33:41.000Z (5 months ago)
• Last Synced: 2024-10-31T22:02:24.275Z (13 days ago)
• Topics: animations, css3, font-awesome
• Language: SCSS
• Homepage: http://l-lin.github.io/font-awesome-animation/
• Size: 3.36 MB
• Stars: 912
• Watchers: 47
• Forks: 195
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

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