FlandreScarle7/font-awesome-animation
1
0
Fork 0
mirror of https://github.com/l-lin/font-awesome-animation.git synced 2024-12-26 05:21:31 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

feat: split animations into multiple files + improve README.md with examples

Browse Source
This commit is contained in:
Louis Lin 2021-01-23 14:07:47 +01:00
parent 9b3b154390
commit 09e963e209
25 changed files with 1360 additions and 1188 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

43
README.md
View File

@ -64,24 +64,26 @@ You can regulate the speed of the animation by adding the CSS class `faa-fast` o
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome-animation/css/font-awesome-animation.min.css">
<link rel="stylesheet" href="http://localhost:8080/css/font-awesome-animation.min.css">
| On DOM Load | On hover | On parent hover |
|-------------|----------|-----------------|
|<a href="#"><i class="fa fa-wrench faa-wrench animated"></i>&nbsp;faa-wrench animated</a>|<a href="#"><i class="fa fa-wrench faa-wrench animated"></i>&nbsp;faa-wrench animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-wrench faa-wrench"></i>&nbsp;faa-wrench</a>|
|<a href="#"><i class="fa fa-bell faa-ring animated"></i>&nbsp;faa-ring animated</a>|<a href="#"><i class="fa fa-bell faa-ring animated"></i>&nbsp;faa-ring animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-bell faa-ring"></i>&nbsp;faa-ring</a>|
|<a href="#"><i class="fa fa-envelope faa-horizontal animated"></i>&nbsp;faa-horizontal animated</a>|<a href="#"><i class="fa fa-envelope faa-horizontal animated"></i>&nbsp;faa-horizontal animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-horizontal"></i>&nbsp;faa-horizontal</a>|
|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated"></i>&nbsp;faa-vertical animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated"></i>&nbsp;faa-vertical animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-vertical"></i>&nbsp;faa-vertical</a>|
|<a href="#"><i class="fa fa-warning faa-flash animated"></i>&nbsp;faa-flash animated</a>|<a href="#"><i class="fa fa-warning faa-flash animated"></i>&nbsp;faa-flash animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-warning faa-flash"></i>&nbsp;faa-flash</a>|
|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated"></i>&nbsp;faa-bounce animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated"></i>&nbsp;faa-bounce animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-bounce"></i>&nbsp;faa-bounce</a>|
|<a href="#"><i class="fa fa-spinner faa-spin animated"></i>&nbsp;faa-spin animated</a>|<a href="#"><i class="fa fa-spinner faa-spin animated"></i>&nbsp;faa-spin animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-spinner faa-spin"></i>&nbsp;faa-spin</a>|
|<a href="#"><i class="fa fa-plane faa-float animated"></i>&nbsp;faa-float animated</a>|<a href="#"><i class="fa fa-plane faa-float animated"></i>&nbsp;faa-float animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-plane faa-float"></i>&nbsp;faa-float</a>|
|<a href="#"><i class="fa fa-heart faa-pulse animated"></i>&nbsp;faa-pulse animated</a>|<a href="#"><i class="fa fa-heart faa-pulse animated"></i>&nbsp;faa-pulse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-heart faa-pulse"></i>&nbsp;faa-pulse</a>|
|<a href="#"><i class="fa fa-envelope faa-shake animated"></i>&nbsp;faa-shake animated</a>|<a href="#"><i class="fa fa-envelope faa-shake animated"></i>&nbsp;faa-shake animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-shake"></i>&nbsp;faa-shake</a>|
|<a href="#"><i class="fa fa-trophy faa-tada animated"></i>&nbsp;faa-tada animated</a>|<a href="#"><i class="fa fa-trophy faa-tada animated"></i>&nbsp;faa-tada animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-trophy faa-tada"></i>&nbsp;faa-tada</a>|
|<a href="#"><i class="fa fa-space-shuttle faa-passing animated"></i>&nbsp;faa-passing animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing animated"></i>&nbsp;faa-passing animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing"></i>&nbsp;faa-passing</a>|
|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated"></i>&nbsp;faa-passing-reverse animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated"></i>&nbsp;faa-passing-reverse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing-reverse"></i>&nbsp;faa-passing-reverse</a>|
|<a href="#"><i class="fa fa-circle-o faa-burst animated"></i>&nbsp;faa-burst animated</a>|<a href="#"><i class="fa fa-circle-o faa-burst animated"></i>&nbsp;faa-burst animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-circle-o faa-burst"></i>&nbsp;faa-burst</a>|
|<a href="#"><i class="fa fa-star-o faa-falling animated"></i>&nbsp;faa-falling animated</a>|<a href="#"><i class="fa fa-star-o faa-falling animated"></i>&nbsp;faa-falling animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-falling"></i>&nbsp;faa-falling</a>|
|<a href="#"><i class="fa fa-wrench faa-wrench animated"></i>&nbsp;faa-wrench animated</a>|<a href="#"><i class="fa fa-wrench faa-wrench animated-hover"></i>&nbsp;faa-wrench animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-wrench faa-wrench"></i>&nbsp;faa-wrench</a>|
|<a href="#"><i class="fa fa-bell faa-ring animated"></i>&nbsp;faa-ring animated</a>|<a href="#"><i class="fa fa-bell faa-ring animated-hover"></i>&nbsp;faa-ring animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-bell faa-ring"></i>&nbsp;faa-ring</a>|
|<a href="#"><i class="fa fa-envelope faa-horizontal animated"></i>&nbsp;faa-horizontal animated</a>|<a href="#"><i class="fa fa-envelope faa-horizontal animated-hover"></i>&nbsp;faa-horizontal animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-horizontal"></i>&nbsp;faa-horizontal</a>|
|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated"></i>&nbsp;faa-vertical animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>&nbsp;faa-vertical animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-vertical"></i>&nbsp;faa-vertical</a>|
|<a href="#"><i class="fa fa-warning faa-flash animated"></i>&nbsp;faa-flash animated</a>|<a href="#"><i class="fa fa-warning faa-flash animated-hover"></i>&nbsp;faa-flash animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-warning faa-flash"></i>&nbsp;faa-flash</a>|
|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated"></i>&nbsp;faa-bounce animated</a>|<a href="#"><i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>&nbsp;faa-bounce animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-thumbs-o-up faa-bounce"></i>&nbsp;faa-bounce</a>|
|<a href="#"><i class="fa fa-spinner faa-spin animated"></i>&nbsp;faa-spin animated</a>|<a href="#"><i class="fa fa-spinner faa-spin animated-hover"></i>&nbsp;faa-spin animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-spinner faa-spin"></i>&nbsp;faa-spin</a>|
|<a href="#"><i class="fa fa-plane faa-float animated"></i>&nbsp;faa-float animated</a>|<a href="#"><i class="fa fa-plane faa-float animated-hover"></i>&nbsp;faa-float animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-plane faa-float"></i>&nbsp;faa-float</a>|
|<a href="#"><i class="fa fa-heart faa-pulse animated"></i>&nbsp;faa-pulse animated</a>|<a href="#"><i class="fa fa-heart faa-pulse animated-hover"></i>&nbsp;faa-pulse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-heart faa-pulse"></i>&nbsp;faa-pulse</a>|
|<a href="#"><i class="fa fa-envelope faa-shake animated"></i>&nbsp;faa-shake animated</a>|<a href="#"><i class="fa fa-envelope faa-shake animated-hover"></i>&nbsp;faa-shake animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-envelope faa-shake"></i>&nbsp;faa-shake</a>|
|<a href="#"><i class="fa fa-trophy faa-tada animated"></i>&nbsp;faa-tada animated</a>|<a href="#"><i class="fa fa-trophy faa-tada animated-hover"></i>&nbsp;faa-tada animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-trophy faa-tada"></i>&nbsp;faa-tada</a>|
|<a href="#"><i class="fa fa-space-shuttle faa-passing animated"></i>&nbsp;faa-passing animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing animated-hover"></i>&nbsp;faa-passing animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing"></i>&nbsp;faa-passing</a>|
|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated"></i>&nbsp;faa-passing-reverse animated</a>|<a href="#"><i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i>&nbsp;faa-passing-reverse animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-space-shuttle faa-passing-reverse"></i>&nbsp;faa-passing-reverse</a>|
|<a href="#"><i class="fa fa-circle-o faa-burst animated"></i>&nbsp;faa-burst animated</a>|<a href="#"><i class="fa fa-circle-o faa-burst animated-hover"></i>&nbsp;faa-burst animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-circle-o faa-burst"></i>&nbsp;faa-burst</a>|
|<a href="#"><i class="fa fa-star-o faa-falling animated"></i>&nbsp;faa-falling animated</a>|<a href="#"><i class="fa fa-star-o faa-falling animated-hover"></i>&nbsp;faa-falling animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-falling"></i>&nbsp;faa-falling</a>|
|<a href="#"><i class="fa fa-star-o faa-rising animated"></i>&nbsp;faa-rising animated</a>|<a href="#"><i class="fa fa-star-o faa-rising animated-hover"></i>&nbsp;faa-rising animated-hover</a>|<a href="#" class="faa-parent animated-hover"><i class="fa fa-star-o faa-rising"></i>&nbsp;faa-rising</a>|
## Development
@ -93,11 +95,18 @@ npm install
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][])
## License
[MIT License](LICENSE)
[FontAwesome]: https://fontawesome.com/
[npm-link]: https://www.npmjs.com/package/font-awesome-animation
[cdn-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation
[FontAwesome]: https://fontawesome.com/
[http-server]: https://www.npmjs.com/package/http-server
[markdown-preview.nvim]: https://github.com/iamcco/markdown-preview.nvim
[npm-link]: https://www.npmjs.com/package/font-awesome-animation

1555
css/font-awesome-animation.css
View File

File diff suppressed because it is too large Load Diff

2
css/font-awesome-animation.css.map
View File

File diff suppressed because one or more lines are too long

2
css/font-awesome-animation.min.css vendored
View File

File diff suppressed because one or more lines are too long

16
font-awesome-animation.scss Normal file
View File

@ -0,0 +1,16 @@
@import 'scss/bounce';
@import 'scss/burst';
@import 'scss/falling';
@import 'scss/flash';
@import 'scss/float';
@import 'scss/horizontal';
@import 'scss/passing-reverse';
@import 'scss/passing';
@import 'scss/pulse';
@import 'scss/ring';
@import 'scss/rising';
@import 'scss/shake';
@import 'scss/spin';
@import 'scss/tada';
@import 'scss/vertical';
@import 'scss/wrench';

7
package.json
View File

@ -4,7 +4,7 @@
"dependencies": {},
"author": "l-lin",
"license": "MIT",
"main": "sass/$npm_package_name.sass",
"main": "$npm_package_name.scss",
"repository": {
"type": "git",
"url": "git+https://github.com/l-lin/font-awesome-animation.git"
@ -27,13 +27,14 @@
"node": ">=12.0.0"
},
"scripts": {
"build": "npm run clean && npm run build:sass && npm run build:autoprefixer && npm run build:cleancss && npm run generate:banner && npm run concat:banner",
"build": "npm run clean && npm run generate:main && npm run build:sass && npm run build:autoprefixer && npm run build:cleancss && npm run generate:banner && npm run concat:banner",
"build:autoprefixer": "postcss --use autoprefixer --map false --output css/$npm_package_name.css css/$npm_package_name.css",
"build:cleancss": "cleancss -o css/$npm_package_name.min.css css/$npm_package_name.css",
"build:sass": "node-sass --output-style expanded --source-map true scss/font-awesome-animation.scss css/font-awesome-animation.css",
"build:sass": "node-sass --output-style expanded --source-map true $npm_package_name.scss css/$npm_package_name.css",
"clean": "rimraf -f build css",
"concat:banner": "concat build/banner.css css/$npm_package_name.css -o css/$npm_package_name.css && concat build/banner.css css/$npm_package_name.min.css -o css/$npm_package_name.min.css",
"generate:banner": "mkdir -p build && node scripts/generate_banner.js build/banner.css",
"generate:main": "node scripts/generate_main.js scss $npm_package_name.scss",
"version": "npm run build",
"postversion": "git push && git push --tags"
},

7
scripts/generate_banner.js
View File

@ -2,12 +2,13 @@ const Handlebars = require('handlebars');
const fs = require('fs');
const pjson = require('../package.json');
const parameters = process.argv.slice(2);
const outputFilePath = parameters[0];
console.debug('');
const template = Handlebars.compile('/*! {{ name }} v{{ version }} | MIT License | https://github.com/{{ author }}/{{ name }} */');
const result = template(pjson);
const outputFilePath = process.argv.slice(1)[1];
fs.writeFile(outputFilePath, result, err => {
if (err) {
console.log(err);

22
scripts/generate_main.js Normal file
View File

@ -0,0 +1,22 @@
const Handlebars = require('handlebars');
const fs = require('fs');
const parameters = process.argv.slice(2);
const inputFolderFilePath = parameters[0];
const outputFilePath = parameters[1];
console.debug('Reading ' + inputFolderFilePath + ' folder to generate into ' + outputFilePath);
const files = fs.readdirSync(inputFolderFilePath);
let model = {};
model.files = files.map(file => file.replace('.scss', ''));
const template = Handlebars.compile('{{#each files}}@import \'scss/{{this}}\';\n{{/each}}');
const result = template(model);
fs.writeFile(outputFilePath, result, err => {
if (err) {
console.log(err);
process.exit(1);
}
});

26
scss/bounce.scss Normal file
View File

@ -0,0 +1,26 @@
@keyframes bounce {
0%,10%,20%,50%,80%,100% {
transform:translateY(0);
}
40% {
transform:translateY(-15px);
}
60% {
transform:translateY(-15px);
}
}
.faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-bounce {
animation: bounce 2s ease infinite;
}
.faa-bounce.animated.faa-fast,
.faa-bounce.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-bounce.faa-fast {
animation: bounce 1s ease infinite;
}
.faa-bounce.animated.faa-slow,
.faa-bounce.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-bounce.faa-slow {
animation: bounce 3s ease infinite;
}

27
scss/burst.scss Normal file
View File

@ -0,0 +1,27 @@
@keyframes burst {
0% {
opacity:.6;
}
50% {
transform:scale(1.8);
opacity:0;
}
100% {
opacity:0;
}
}
.faa-burst.animated,
.faa-burst.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-burst {
animation: burst 2s infinite linear;
}
.faa-burst.animated.faa-fast,
.faa-burst.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-burst.faa-fast {
animation: burst 1s infinite linear;
}
.faa-burst.animated.faa-slow,
.faa-burst.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-burst.faa-slow {
animation: burst 3s infinite linear;
}

29
scss/falling.scss Normal file
View File

@ -0,0 +1,29 @@
@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;
}

24
scss/flash.scss Normal file
View File

@ -0,0 +1,24 @@
@keyframes flash {
0%,100%,50% {
opacity:1;
}
25%,75%
{
opacity:0;
}
}
.faa-flash.animated,
.faa-flash.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-flash {
animation: flash 2s ease infinite;
}
.faa-flash.animated.faa-fast,
.faa-flash.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-flash.faa-fast {
animation: flash 1s ease infinite;
}
.faa-flash.animated.faa-slow,
.faa-flash.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-flash.faa-slow {
animation: flash 3s ease infinite;
}

26
scss/float.scss Normal file
View File

@ -0,0 +1,26 @@
@keyframes float{
0% {
transform: translateY(0);
}
50% {
transform: translateY(-6px);
}
100% {
transform: translateY(0);
}
}
.faa-float.animated,
.faa-float.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-float {
animation: float 2s linear infinite;
}
.faa-float.animated.faa-fast,
.faa-float.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-float.faa-fast {
animation: float 1s linear infinite;
}
.faa-float.animated.faa-slow,
.faa-float.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-float.faa-slow {
animation: float 3s linear infinite;
}

385
scss/font-awesome-animation.scss
View File

@ -1,385 +0,0 @@
/* WRENCHING */
@keyframes wrench {
0%{transform:rotate(-12deg)}
8%{transform:rotate(12deg)}
10%{transform:rotate(24deg)}
18%{transform:rotate(-24deg)}
20%{transform:rotate(-24deg)}
28%{transform:rotate(24deg)}
30%{transform:rotate(24deg)}
38%{transform:rotate(-24deg)}
40%{transform:rotate(-24deg)}
48%{transform:rotate(24deg)}
50%{transform:rotate(24deg)}
58%{transform:rotate(-24deg)}
60%{transform:rotate(-24deg)}
68%{transform:rotate(24deg)}
75%,100%{transform:rotate(0deg)}
}
.faa-wrench.animated,
.faa-wrench.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-wrench {
animation: wrench 2.5s ease infinite;
transform-origin-x: 90%;
transform-origin-y: 35%;
transform-origin-z: initial;
}
.faa-wrench.animated.faa-fast,
.faa-wrench.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
animation: wrench 1.2s ease infinite;
}
.faa-wrench.animated.faa-slow,
.faa-wrench.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
animation: wrench 3.7s ease infinite;
}
/* BELL */
@keyframes ring {
0%{transform:rotate(-15deg)}
2%{transform:rotate(15deg)}
4%{transform:rotate(-18deg)}
6%{transform:rotate(18deg)}
8%{transform:rotate(-22deg)}
10%{transform:rotate(22deg)}
12%{transform:rotate(-18deg)}
14%{transform:rotate(18deg)}
16%{transform:rotate(-12deg)}
18%{transform:rotate(12deg)}
20%,100%{transform:rotate(0deg)}
}
.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
animation: ring 2s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0px;
transform-origin-z: initial;
}
.faa-ring.animated.faa-fast,
.faa-ring.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-ring.faa-fast {
animation: ring 1s ease infinite;
}
.faa-ring.animated.faa-slow,
.faa-ring.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-ring.faa-slow {
animation: ring 3s ease infinite;
}
/* VERTICAL */
@keyframes vertical {
0%{transform:translate(0,-3px)}
4%{transform:translate(0,3px)}
8%{transform:translate(0,-3px)}
12%{transform:translate(0,3px)}
16%{transform:translate(0,-3px)}
20%{transform:translate(0,3px)}
22%,100%{transform:translate(0,0)}
}
.faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-vertical {
animation: vertical 2s ease infinite;
}
.faa-vertical.animated.faa-fast,
.faa-vertical.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-vertical.faa-fast {
animation: vertical 1s ease infinite;
}
.faa-vertical.animated.faa-slow,
.faa-vertical.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
animation: vertical 4s ease infinite;
}
/* HORIZONTAL */
@keyframes horizontal {
0%{transform:translate(0,0)}
6%{transform:translate(5px,0)}
12%{transform:translate(0,0)}
18%{transform:translate(5px,0)}
24%{transform:translate(0,0)}
30%{transform:translate(5px,0)}
36%,100%{transform:translate(0,0)}
}
.faa-horizontal.animated,
.faa-horizontal.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-horizontal {
animation: horizontal 2s ease infinite;
}
.faa-horizontal.animated.faa-fast,
.faa-horizontal.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-horizontal.faa-fast {
animation: horizontal 1s ease infinite;
}
.faa-horizontal.animated.faa-slow,
.faa-horizontal.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-horizontal.faa-slow {
animation: horizontal 3s ease infinite;
}
/* FLASHING */
@keyframes flash {
0%,100%,50%{opacity:1}
25%,75%{opacity:0}
}
.faa-flash.animated,
.faa-flash.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-flash {
animation: flash 2s ease infinite;
}
.faa-flash.animated.faa-fast,
.faa-flash.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-flash.faa-fast {
animation: flash 1s ease infinite;
}
.faa-flash.animated.faa-slow,
.faa-flash.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-flash.faa-slow {
animation: flash 3s ease infinite;
}
/* BOUNCE */
@keyframes bounce {
0%,10%,20%,50%,80%,100%{transform:translateY(0)}
40%{transform:translateY(-15px)}
60%{transform:translateY(-15px)}
}
.faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-bounce {
animation: bounce 2s ease infinite;
}
.faa-bounce.animated.faa-fast,
.faa-bounce.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-bounce.faa-fast {
animation: bounce 1s ease infinite;
}
.faa-bounce.animated.faa-slow,
.faa-bounce.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-bounce.faa-slow {
animation: bounce 3s ease infinite;
}
/* SPIN */
@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
.faa-spin.animated,
.faa-spin.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-spin {
animation: spin 1.5s linear infinite;
}
.faa-spin.animated.faa-fast,
.faa-spin.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-spin.faa-fast {
animation: spin 0.7s linear infinite;
}
.faa-spin.animated.faa-slow,
.faa-spin.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-spin.faa-slow {
animation: spin 2.2s linear infinite;
}
/* FLOAT */
@keyframes float{
0%{transform: translateY(0)}
50%{transform: translateY(-6px)}
100%{transform: translateY(0)}
}
.faa-float.animated,
.faa-float.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-float {
animation: float 2s linear infinite;
}
.faa-float.animated.faa-fast,
.faa-float.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-float.faa-fast {
animation: float 1s linear infinite;
}
.faa-float.animated.faa-slow,
.faa-float.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-float.faa-slow {
animation: float 3s linear infinite;
}
/* PULSE */
@keyframes pulse {
0% {transform: scale(1.1)}
50% {transform: scale(0.8)}
100% {transform: scale(1.1)}
}
.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
animation: pulse 2s linear infinite;
}
.faa-pulse.animated.faa-fast,
.faa-pulse.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
animation: pulse 1s linear infinite;
}
.faa-pulse.animated.faa-slow,
.faa-pulse.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
animation: pulse 3s linear infinite;
}
/* SHAKE */
.faa-shake.animated,
.faa-shake.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-shake {
animation: wrench 2.5s ease infinite;
}
.faa-shake.animated.faa-fast,
.faa-shake.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-shake.faa-fast {
animation: wrench 1.2s ease infinite;
}
.faa-shake.animated.faa-slow,
.faa-shake.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-shake.faa-slow {
animation: wrench 3.7s ease infinite;
}
/* TADA */
@keyframes tada {
0% {transform: scale(1)}
10%,20% {transform:scale(.9) rotate(-8deg);}
30%,50%,70% {transform:scale(1.3) rotate(8deg)}
40%,60% {transform:scale(1.3) rotate(-8deg)}
80%,100% {transform:scale(1) rotate(0)}
}
.faa-tada.animated,
.faa-tada.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-tada {
animation: tada 2s linear infinite;
}
.faa-tada.animated.faa-fast,
.faa-tada.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
animation: tada 1s linear infinite;
}
.faa-tada.animated.faa-slow,
.faa-tada.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
animation: tada 3s linear infinite;
}
/* PASSING */
@keyframes passing {
0% {transform:translateX(-50%); opacity:0}
50% {transform:translateX(0%); opacity:1}
100% {transform:translateX(50%); opacity:0}
}
.faa-passing.animated,
.faa-passing.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing {
animation: passing 2s linear infinite;
}
.faa-passing.animated.faa-fast,
.faa-passing.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-passing.faa-fast {
animation: passing 1s linear infinite;
}
.faa-passing.animated.faa-slow,
.faa-passing.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-passing.faa-slow {
animation: passing 3s linear infinite;
}
/* PASSING REVERSE */
@keyframes passing-reverse {
0% {transform:translateX(50%); opacity:0}
50% {transform:translateX(0%); opacity:1}
100% {transform:translateX(-50%); opacity:0}
}
.faa-passing-reverse.animated,
.faa-passing-reverse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse {
animation: passing-reverse 2s linear infinite;
}
.faa-passing-reverse.animated.faa-fast,
.faa-passing-reverse.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
animation: passing-reverse 1s linear infinite;
}
.faa-passing-reverse.animated.faa-slow,
.faa-passing-reverse.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
animation: passing-reverse 3s linear infinite;
}
/* BURST */
@keyframes burst {
0% {opacity:.6}
50% {transform:scale(1.8);opacity:0}
100%{opacity:0}
}
.faa-burst.animated,
.faa-burst.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-burst {
animation: burst 2s infinite linear
}
.faa-burst.animated.faa-fast,
.faa-burst.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-burst.faa-fast {
animation: burst 1s infinite linear
}
.faa-burst.animated.faa-slow,
.faa-burst.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-burst.faa-slow {
animation: burst 3s infinite linear
}
/* FALLING */
@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;
}
/* RISING */
@keyframes rising {
0% {transform:translateY(50%); opacity:0}
50% {transform:translateY(0%); opacity:1}
100% {transform:translateY(-50%); opacity:0}
}
.faa-rising.animated,
.faa-rising.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-rising {
animation: rising 2s linear infinite;
}
.faa-rising.animated.faa-fast,
.faa-rising.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
animation: rising 1s linear infinite;
}
.faa-rising.animated.faa-slow,
.faa-rising.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
animation: rising 3s linear infinite;
}

38
scss/horizontal.scss Normal file
View File

@ -0,0 +1,38 @@
@keyframes horizontal {
0% {
transform:translate(0,0);
}
6% {
transform:translate(5px,0);
}
12% {
transform:translate(0,0);
}
18% {
transform:translate(5px,0);
}
24% {
transform:translate(0,0);
}
30% {
transform:translate(5px,0);
}
36%,100% {
transform:translate(0,0);
}
}
.faa-horizontal.animated,
.faa-horizontal.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-horizontal {
animation: horizontal 2s ease infinite;
}
.faa-horizontal.animated.faa-fast,
.faa-horizontal.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-horizontal.faa-fast {
animation: horizontal 1s ease infinite;
}
.faa-horizontal.animated.faa-slow,
.faa-horizontal.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-horizontal.faa-slow {
animation: horizontal 3s ease infinite;
}

29
scss/passing-reverse.scss Normal file
View File

@ -0,0 +1,29 @@
@keyframes passing-reverse {
0% {
transform:translateX(50%);
opacity:0;
}
50% {
transform:translateX(0%);
opacity:1;
}
100% {
transform:translateX(-50%);
opacity:0;
}
}
.faa-passing-reverse.animated,
.faa-passing-reverse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse {
animation: passing-reverse 2s linear infinite;
}
.faa-passing-reverse.animated.faa-fast,
.faa-passing-reverse.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast {
animation: passing-reverse 1s linear infinite;
}
.faa-passing-reverse.animated.faa-slow,
.faa-passing-reverse.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow {
animation: passing-reverse 3s linear infinite;
}

29
scss/passing.scss Normal file
View File

@ -0,0 +1,29 @@
@keyframes passing {
0% {
transform:translateX(-50%);
opacity:0;
}
50% {
transform:translateX(0%);
opacity:1;
}
100% {
transform:translateX(50%);
opacity:0;
}
}
.faa-passing.animated,
.faa-passing.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing {
animation: passing 2s linear infinite;
}
.faa-passing.animated.faa-fast,
.faa-passing.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-passing.faa-fast {
animation: passing 1s linear infinite;
}
.faa-passing.animated.faa-slow,
.faa-passing.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-passing.faa-slow {
animation: passing 3s linear infinite;
}

26
scss/pulse.scss Normal file
View File

@ -0,0 +1,26 @@
@keyframes pulse {
0% {
transform: scale(1.1);
}
50% {
transform: scale(0.8);
}
100% {
transform: scale(1.1);
}
}
.faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
animation: pulse 2s linear infinite;
}
.faa-pulse.animated.faa-fast,
.faa-pulse.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-fast {
animation: pulse 1s linear infinite;
}
.faa-pulse.animated.faa-slow,
.faa-pulse.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-slow {
animation: pulse 3s linear infinite;
}

53
scss/ring.scss Normal file
View File

@ -0,0 +1,53 @@
@keyframes ring {
0% {
transform:rotate(-15deg);
}
2% {
transform:rotate(15deg);
}
4% {
transform:rotate(-18deg);
}
6% {
transform:rotate(18deg);
}
8% {
transform:rotate(-22deg);
}
10% {
transform:rotate(22deg);
}
12% {
transform:rotate(-18deg);
}
14% {
transform:rotate(18deg);
}
16% {
transform:rotate(-12deg);
}
18% {
transform:rotate(12deg);
}
20%,100% {
transform:rotate(0deg);
}
}
.faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
animation: ring 2s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0px;
transform-origin-z: initial;
}
.faa-ring.animated.faa-fast,
.faa-ring.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-ring.faa-fast {
animation: ring 1s ease infinite;
}
.faa-ring.animated.faa-slow,
.faa-ring.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-ring.faa-slow {
animation: ring 3s ease infinite;
}

29
scss/rising.scss Normal file
View File

@ -0,0 +1,29 @@
@keyframes rising {
0% {
transform:translateY(50%);
opacity:0;
}
50% {
transform:translateY(0%);
opacity:1;
}
100% {
transform:translateY(-50%);
opacity:0;
}
}
.faa-rising.animated,
.faa-rising.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-rising {
animation: rising 2s linear infinite;
}
.faa-rising.animated.faa-fast,
.faa-rising.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-rising.faa-fast {
animation: rising 1s linear infinite;
}
.faa-rising.animated.faa-slow,
.faa-rising.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-rising.faa-slow {
animation: rising 3s linear infinite;
}

15
scss/shake.scss Normal file
View File

@ -0,0 +1,15 @@
.faa-shake.animated,
.faa-shake.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-shake {
animation: wrench 2.5s ease infinite;
}
.faa-shake.animated.faa-fast,
.faa-shake.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-shake.faa-fast {
animation: wrench 1.2s ease infinite;
}
.faa-shake.animated.faa-slow,
.faa-shake.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-shake.faa-slow {
animation: wrench 3.7s ease infinite;
}

23
scss/spin.scss Normal file
View File

@ -0,0 +1,23 @@
@keyframes spin{
0% {
transform:rotate(0deg);
}
100% {
transform:rotate(359deg);
}
}
.faa-spin.animated,
.faa-spin.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-spin {
animation: spin 1.5s linear infinite;
}
.faa-spin.animated.faa-fast,
.faa-spin.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-spin.faa-fast {
animation: spin 0.7s linear infinite;
}
.faa-spin.animated.faa-slow,
.faa-spin.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-spin.faa-slow {
animation: spin 2.2s linear infinite;
}

32
scss/tada.scss Normal file
View File

@ -0,0 +1,32 @@
@keyframes tada {
0% {
transform: scale(1);
}
10%,20% {
transform:scale(.9) rotate(-8deg);;
}
30%,50%,70% {
transform:scale(1.3) rotate(8deg);
}
40%,60% {
transform:scale(1.3) rotate(-8deg);
}
80%,100% {
transform:scale(1) rotate(0);
}
}
.faa-tada.animated,
.faa-tada.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-tada {
animation: tada 2s linear infinite;
}
.faa-tada.animated.faa-fast,
.faa-tada.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-fast {
animation: tada 1s linear infinite;
}
.faa-tada.animated.faa-slow,
.faa-tada.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-slow {
animation: tada 3s linear infinite;
}

38
scss/vertical.scss Normal file
View File

@ -0,0 +1,38 @@
@keyframes vertical {
0% {
transform:translate(0,-3px);
}
4% {
transform:translate(0,3px);
}
8% {
transform:translate(0,-3px);
}
12% {
transform:translate(0,3px);
}
16% {
transform:translate(0,-3px);
}
20% {
transform:translate(0,3px);
}
22%,100% {
transform:translate(0,0);
}
}
.faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-vertical {
animation: vertical 2s ease infinite;
}
.faa-vertical.animated.faa-fast,
.faa-vertical.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-vertical.faa-fast {
animation: vertical 1s ease infinite;
}
.faa-vertical.animated.faa-slow,
.faa-vertical.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-vertical.faa-slow {
animation: vertical 4s ease infinite;
}

65
scss/wrench.scss Normal file
View File

@ -0,0 +1,65 @@
@keyframes wrench {
0% {
transform:rotate(-12deg);
}
8% {
transform:rotate(12deg);
}
10% {
transform:rotate(24deg);
}
18% {
transform:rotate(-24deg);
}
20% {
transform:rotate(-24deg);
}
28% {
transform:rotate(24deg);
}
30% {
transform:rotate(24deg);
}
38% {
transform:rotate(-24deg);
}
40% {
transform:rotate(-24deg);
}
48% {
transform:rotate(24deg);
}
50% {
transform:rotate(24deg);
}
58% {
transform:rotate(-24deg);
}
60% {
transform:rotate(-24deg);
}
68% {
transform:rotate(24deg);
}
75%,100% {
transform:rotate(0deg);
}
}
.faa-wrench.animated,
.faa-wrench.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-wrench {
animation: wrench 2.5s ease infinite;
transform-origin-x: 90%;
transform-origin-y: 35%;
transform-origin-z: initial;
}
.faa-wrench.animated.faa-fast,
.faa-wrench.animated-hover.faa-fast:hover,
.faa-parent.animated-hover:hover > .faa-wrench.faa-fast {
animation: wrench 1.2s ease infinite;
}
.faa-wrench.animated.faa-slow,
.faa-wrench.animated-hover.faa-slow:hover,
.faa-parent.animated-hover:hover > .faa-wrench.faa-slow {
animation: wrench 3.7s ease infinite;
}