l-lin / Font Awesome Animation
Licence: mit
Simple animations using FontAwesome and some CSS3.
Stars: ✭ 856
Projects that are alternatives of or similar to Font Awesome Animation
Font awesome5 rails
font_awesome_5_rails is font awesome 5 gem bundled for rails asset pipeline
Stars: ✭ 148 (-82.71%)
Mutual labels: font-awesome, scss
React Portfolio Template
Modern React Portfolio Template (FREE)
Stars: ✭ 188 (-78.04%)
Mutual labels: animations, scss
Feathers Vue
A boiler plate template using Feathers with Email Verification, Vue 2 with Server Side Rendering, stylus, scss, jade, babel, webpack, ES 6-8, login form, user authorization, and SEO
Stars: ✭ 195 (-77.22%)
Mutual labels: font-awesome, scss
Shorthand
Feature rich CSS framework for the new decade https://shorthandcss.com
Stars: ✭ 230 (-73.13%)
Mutual labels: scss, css3
Construcao De Paginas Web
Desenvolvimento de páginas semânticas, acessíveis e responsivas. 🚀
Stars: ✭ 113 (-86.8%)
Mutual labels: animations, css3
Clever Bootstrap 4 Admin Template With Angularjs Angular 2 Support
Clever is Boostrap 4 Admin Template with Angular 2 and AngularJS support
Stars: ✭ 98 (-88.55%)
Mutual labels: scss, css3
learn-css-animation
Learn CSS animation with fun. It is simple, easy to use, and fun to learn.
Stars: ✭ 54 (-93.69%)
Mutual labels: css3, animations
Dynamic.css
🚀 Awesome Library of CSS3 animations 🎉
Stars: ✭ 38 (-95.56%)
Mutual labels: css3, animations
Csscreatures
Make a creature by tweeting to @csscreatures
Stars: ✭ 144 (-83.18%)
Mutual labels: scss, css3
Font Awesome Scss
Font Awesome Scss Core (Unofficial)
Stars: ✭ 119 (-86.1%)
Mutual labels: font-awesome, scss
W3develops
The w3develops.org open source codebase - Learn, build, and meetup with other developers on DISCORD https://discord.gg/WphGvTT and YOUTUBE http://bit.ly/codingyt
Stars: ✭ 120 (-85.98%)
Mutual labels: scss, css3
Backbone Responsive Css3 Page Transitions
CSS3 hardware accelerated page transitions optimised for fluid layouts
Stars: ✭ 34 (-96.03%)
Mutual labels: animations, css3
Web Portfolio
Personal portfolio website made with the React
Stars: ✭ 207 (-75.82%)
Mutual labels: animations, scss
Awesome Design Tools
The best design tools and plugins for everything 👉
Stars: ✭ 23,754 (+2675%)
Mutual labels: animations, font-awesome
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> 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
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].