> Simple animations using some CSS3 I found on the web. > Best used on glyphicons like [FontAwesome][]
npm install font-awesome-animation> Simple animations using some CSS3 I found on the web.
> Best used on glyphicons like [FontAwesome][]
!build
![npm][npm-link]
![npm][npm-link]
![jsdelivr][cdn-link]
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`
Add the desired CSS class faa-xxx along with animated to the icon (or any element of your DOM):
`html`
Instead of using animated, use the animated-hover CSS class:
`html`
For parent hover, add the CSS class faa-parent and animated-hover on the parent element:
`html`
hover mouse here
You can regulate the speed of the animation by adding the CSS class faa-fast or faa-slow:
`html`
fast
slow
Check the Github page 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
|||||
`bashinstall dependencies
npm install
$3
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][])$3
`sh
this will create a new version and push to remote repository
npm version [ | major | minor | patch]
``Then go to the release page and manually
create a new release. There is an automatic Github action that
publishes automatically to NPM repository.
[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