l-lin / font-awesome-animation

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

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:

• 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

# 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

font-awesome-animation's Issues

0.0.7 is not tagged

please tag it! thanks!

Which icons are supported?

Hi,

The title sums it pretty much all up. Are all icons from fontawesome supported?

Fontawesome 5

Will this be ported to use Fontawesome 5?

Bad package.json version

When installing with bower I get the following warning:
bower font-awesome-animation#0.0.8 mismatch Version declared in the json (0.0.7) is different than the resolved one (0.0.8)

This is due to the package.json version have not been bumped to 0.0.8

Please release a new version with hover-on-parent

It's a useful feature, but I can't just pull the new version using bower, I need to use a hash tag to the master branch. Will be nicer to pull version 0.0.5.

how to make it to play one time only after load?

how to make it to play the animation one time only after load?

update the tag to 0.0.7

hi, could you please update the tag to v0.0.7 so that we can add your lib on https://cdnjs.com with git auto-update
cdnjs/cdnjs#5949

NPM Installation Package

I tried installing it via NPM, but all the grunt dependencies caused me to give up (they aren't installed automatically anymore with NPM 3). Is there a way to install it without requiring Grunt for those that don't use it?

Thanks :)

Horizontal Reversed

What would be the proper way to implement a horizontal reversed where the movement is to the left instead of the right. I've tried to add it by copying horizontal and changing the X value to -5px; however, it doesn't move. I tried adding 5px of padding to the left of the and to the parent container thinking there wasn't room over there, but it still doesn't move.

Is this possible? If so, can you point me in the right direction. I'm wanting an arrow to move to the left to indicate something has to be one over there.

Compatibility

Hi, just wondering whether this is compatable with the font-awesome classes?? I assume it is but i can't seemt to get it working with them. when i use an image however it works fine

Pause before repeat

A feature request. Would be great if a class could be added that would pause the animation before it repeated.

This would presumably mean changing the keyframes for each animation but SASS could help here.

Font awesome animation in WordPress

Hi,

I've tried using animation of font awesome in WP widget, but couldn't get it to work.

I've used as instructed but no results, as you can see tried it on parent element also:

<a href="#" class="faa-parent animated-hover"><i class="fa fa-facebook faa-facebook fa-4x social-icon"></i></a>
<a href="#"><i class="fa fa-twitter faa-twitter animated-hover fa-4x social-icon"></i></a>
<a href="#"><i class="fa fa-linkedin faa-linkedin animated-hover fa-4x social-icon"></i></a>
<a href="#"><i class="fa fa-google-plus faa-google-plus animated-hover fa-4x social-icon"></i></a>

Any advice?

Just a request :)

Hi! I was wondering if it was possible to have an inverted faa-falling animation? Going up?

Thanks for your good work in any case!

IE & Edge Problem: Animation does not stop after mouse over

In IE 11.0 and Edge the animation does not stop even after the mouse leaves. Chrome, Firefox and Safari are fine.

In the attached images all the three icons in the bottom are all pulsating tough the mouse pointer is on top of neither one.

This is the jQuery snippet which adds the classes on page load:

$('a').children('i').parent().addClass('faa-parent animated-hover');
$('a i').addClass('faa-pulse faa-fast');

Would be amazing to add a hover on parent link

Hello,
Thanks for the amazing plugin. Would be really cool if the hover effect could work as well on the parent hyperlink, as very often, the icons are inside links and the effect should work on hover of the link, not just the icon.

Ex:
love

NPM package?

Is this the official npm package by this repo/author?
https://www.npmjs.com/package/font-awesome-animation

animation not support firefox

shake animation not working on firefox

Include SCSS file in the NPM package

Publish the SCSS file in the NPM package so it can be used by other projects.

Include scss file in bower install.

Can you please add the scss file into the bower install ?

faa-falling animation (vertical faa-passing)

Would you mind adding a following animation? It is the same as faa-passing, but vertical.

The source is:

@keyframes falling {
  0% {transform:translateY(-50%); opacity:0}
  50% {transform:translateY(0%); opacity:1}
  100% {transform:translateY(50%); opacity:0}
}

.faa-falling.animated,
.faa-falling.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-falling {
  animation: falling 2s linear infinite;
}
.faa-falling.animated.faa-fast,
.faa-falling.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-falling.faa-fast {
  animation: falling 1s linear infinite;
}
.faa-falling.animated.faa-slow,
.faa-falling.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-falling.faa-slow {
  animation: falling 3s linear infinite;
}

I don't want to setup the whole project just to build it so I have not made a PR. Will be very grateful :-)

Animations override fa-rotate classes

If I try to animate a rotated icon, faa always turns it right side up again.

For example:

<i class="fa fa-twitter fa-rotate-180 fa-3x faa-tada animated"></i>

disable fa icon animation for ipad and touch devices

First of all, thank you for this awesome plugin. I am using the FA Animation in my Angular App when Parent element is hovered. In iPads, when the link is clicked, I noticed that the animation continues until user touches somewhere else to stop the animation. Is there a way to disable hover effects in iPads or when user uses touch devices / touch gestures?

Thanks,
Neel.