l-lin / font-awesome-animation Goto Github PK
View Code? Open in Web Editor NEWSimple animations using FontAwesome and some CSS3.
Home Page: http://l-lin.github.io/font-awesome-animation/
License: MIT License
Simple animations using FontAwesome and some CSS3.
Home Page: http://l-lin.github.io/font-awesome-animation/
License: MIT License
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.
Will this be ported to use Fontawesome 5?
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>
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 :)
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.
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
Publish the SCSS file in the NPM package so it can be used by other projects.
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 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 :-)
Is this the official npm package by this repo/author?
https://www.npmjs.com/package/font-awesome-animation
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
Hi,
The title sums it pretty much all up. Are all icons from fontawesome supported?
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!
shake animation not working on firefox
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
how to make it to play the animation one time only after load?
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.
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
Can you please add the scss file into the bower install ?
please tag it! thanks!
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?
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.