mirror of https://github.com/l-lin/font-awesome-animation.git synced 2024-12-26 05:21:31 +08:00

Simple animations using FontAwesome and some CSS3.

Go to file

dependabot[bot] 8d36a77e87 build(deps): bump minimist from 1.2.5 to 1.2.6 Bumps [minimist](https://github.com/substack/minimist) from 1.2.5 to 1.2.6. - [Release notes](https://github.com/substack/minimist/releases) - [Commits](https://github.com/substack/minimist/compare/1.2.5...1.2.6) --- updated-dependencies: - dependency-name: minimist dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>		2022-04-09 01:53:41 +00:00
.github/workflows	build: remove publishing to Github package	2021-01-22 10:28:51 +01:00
css	1.1.1	2021-01-24 12:32:01 +01:00
scripts	feat: split animations into multiple files + improve README.md with examples	2021-01-23 14:07:47 +01:00
scss	feat(#33 ): add `faa-reverse` + use SCSS variable for speed	2021-01-24 12:20:08 +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(#33 ): add `faa-reverse` + use SCSS variable for speed	2021-01-24 12:20:08 +01:00
LICENSE	doc: update LICENSE dates	2021-01-21 12:42:49 +01:00
package-lock.json	build(deps): bump minimist from 1.2.5 to 1.2.6	2022-04-09 01:53:41 +00:00
package.json	build(deps-dev): bump node-sass from 5.0.0 to 7.0.0	2022-02-11 00:11:29 +00:00
README.md	doc: use latest version of font-awesome-animation version from CDN	2021-01-24 12:40:18 +01:00

font-awesome-animation

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

Getting started

Install from NPM:

npm install font-awesome-animation

Or with a CDN:

Include CSS file in your index.html file:

<link rel="stylesheet" href="font-awesome-animation.min.css">

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>

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

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

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" style="font-size: 3em;"></i>&nbsp;hover mouse here
</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>

fast slow

Check the Github page to view the previews.

# install dependencies
npm install

# generate prefixes and minified CSS files
npm run build

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)

# this will create a new version and push to remote repository
npm version [<newversion> | 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.