• Stars
    star
    914
  • Rank 49,973 (Top 1.0 %)
  • Language SCSS
  • License
    MIT License
  • Created almost 11 years ago
  • Updated over 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Simple animations using FontAwesome and some CSS3.

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

Animation speed

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

Animation list

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

Development

Build

# install dependencies
npm install

# generate prefixes and minified CSS files
npm run build

Local preview

To test in local, you can use:

Release

# 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.

License

MIT License

More Repositories

1

angular-datatables

DataTables with Angular
TypeScript
1,573
star
2

architecture-cheat-sheet

Some architecture reminders
Java
15
star
3

dev-cheat-sheet

Some development reminders
Java
15
star
4

bulletular

Yet another TODO web application with keyboard shortcuts using AngularJS and AngularUI.
JavaScript
12
star
5

angular-notifier

AngularJS simple notifications service
CSS
8
star
6

whatlunchtoday

What should we eat today?
JavaScript
6
star
7

dotfiles

:octocat:
Shell
5
star
8

poc-kafka

POC testing Kafka, Kafka Streams & Kafka Connect
Java
4
star
9

l-lin.github.io

My digital garden
HTML
3
star
10

wn-tracker-api

Web novel tracker API server
Go
3
star
11

pixel-art

Just some pixel arts
CSS
3
star
12

generator-linangular

Yeoman generator for AngularJS with better folders organization
JavaScript
3
star
13

tcli

Trello interactive CLI
Go
2
star
14

spectral-comment-action

Comments pull requests with Spectral linter outputs
JavaScript
2
star
15

gocc_api_client

Client for Oodrive Computer club API with Go
Go
2
star
16

mr-tracker-chrome

Chrome extension to track the activities of your favorite mangas
JavaScript
2
star
17

risk-rating

OWASP risk rating Asciidoctor table generator in command line
Go
1
star
18

heart-rate-calculator

Computes heart rates
Java
1
star
19

mr-tracker-api

Manga tracker API server
Go
1
star
20

openbadges-card

Open badges card is a simple embeddable card showing your Open badges
JavaScript
1
star
21

gotodo

Yet another TODO command line app. This project is only used as training.
Go
1
star
22

lutangular

Lutece + AngularJS
JavaScript
1
star
23

wn-tracker-chrome

Chrome extension to track the activities of your favorite web novels
JavaScript
1
star
24

poc-benchmark-spring-boot

Benchmark app using spring-boot, micrometer, prometheus & grafana
Scala
1
star
25

backtotop

Back to top button shown as you scroll down
JavaScript
1
star