Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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.
- Host: GitHub
- URL: https://github.com/l-lin/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-02-22T15:26:14.000Z (9 months ago)
- Last Synced: 2024-05-22T15:14:53.993Z (6 months ago)
- Topics: animations, css3, font-awesome
- Language: SCSS
- Homepage: http://l-lin.github.io/font-awesome-animation/
- Size: 3.33 MB
- Stars: 913
- 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 loadAdd 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
```### 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