FlandreScarle7/font-awesome-animation
1
0
Fork 0
mirror of https://github.com/l-lin/font-awesome-animation.git synced 2024-10-22 22:31:06 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity
Simple animations using FontAwesome and some CSS3.
87 Commits 1 Branch 19 Tags 3.3 MiB
CSS 54.3%
SCSS 42.7%
JavaScript 3%
09e963e209
Go to file
Louis Lin 09e963e209 feat: split animations into multiple files + improve README.md with examples
2021-01-23 14:07:47 +01:00
.github/workflows build: remove publishing to Github package 2021-01-22 10:28:51 +01:00
css feat: split animations into multiple files + improve README.md with examples 2021-01-23 14:07:47 +01:00
scripts feat: split animations into multiple files + improve README.md with examples 2021-01-23 14:07:47 +01:00
scss feat: split animations into multiple files + improve README.md with examples 2021-01-23 14:07:47 +01:00
_config.yml Set theme jekyll-theme-midnight 2021-01-22 21:21:40 +01:00
.editorconfig build: change CI 2021-01-21 20:25:02 +01:00
.gitignore build: add release workflow 2021-01-22 10:02:23 +01:00
font-awesome-animation.scss feat: split animations into multiple files + improve README.md with examples 2021-01-23 14:07:47 +01:00
LICENSE doc: update LICENSE dates 2021-01-21 12:42:49 +01:00
package-lock.json refactor: switch node-sass from Myth + use SCSS instead to generate CSS 2021-01-22 21:11:12 +01:00
package.json feat: split animations into multiple files + improve README.md with examples 2021-01-23 14:07:47 +01:00
README.md feat: split animations into multiple files + improve README.md with examples 2021-01-23 14:07:47 +01:00

README.md

font-awesome-animation

Simple animations using some CSS3 I found on the web. Best used on glyphicons like FontAwesome

build npm npm jsdelivr

Getting started

Install from NPM:

npm install font-awesome-animation

Or with a CDN:

https://www.jsdelivr.com/package/npm/font-awesome-animation

Include CSS file in your index.html file:

<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):

<i class="fa fa-wrench faa-wrench animated"></i>

On hover

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

<i class="fa fa-wrench faa-wrench animated-hover"></i>

On parent element hover

For parent hover, add the CSS class faa-parent and animated-hover on the parent element:

<a href="#" class="faa-parent animated-hover">
  <i class="fa fa-wrench faa-wrench"></i>
</a>

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

<i class="fa fa-wrench faa-wrench animated faa-fast"></i>
<i class="fa fa-wrench faa-wrench animated faa-slow"></i>

Animation list

On DOM Load On hover On parent hover
 faa-wrench animated  faa-wrench animated-hover  faa-wrench
 faa-ring animated  faa-ring animated-hover  faa-ring
 faa-horizontal animated  faa-horizontal animated-hover  faa-horizontal
 faa-vertical animated  faa-vertical animated-hover  faa-vertical
 faa-flash animated  faa-flash animated-hover  faa-flash
 faa-bounce animated  faa-bounce animated-hover  faa-bounce
 faa-spin animated  faa-spin animated-hover  faa-spin
 faa-float animated  faa-float animated-hover  faa-float
 faa-pulse animated  faa-pulse animated-hover  faa-pulse
 faa-shake animated  faa-shake animated-hover  faa-shake
 faa-tada animated  faa-tada animated-hover  faa-tada
 faa-passing animated  faa-passing animated-hover  faa-passing
 faa-passing-reverse animated  faa-passing-reverse animated-hover  faa-passing-reverse
 faa-burst animated  faa-burst animated-hover  faa-burst
 faa-falling animated  faa-falling animated-hover  faa-falling
 faa-rising animated  faa-rising animated-hover  faa-rising

Development

# install dependencies
npm install

# generate prefixes and minified CSS files
npm run build

To test in local, you can use:

License

MIT License