mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2025-01-14 01:00:30 +08:00
refactor: switch node-sass from Myth + use SCSS instead to generate CSS
BREAKING CHANGE: - `src` folder has become `scss` - `dist` folder has become `css`
This commit is contained in:
Louis Lin
parent
8d8006e246
commit
35c6e176be
26
README.md
26
README.md
@ -1,17 +1,26 @@
|
||||
# font-awesome-animation  [](https://badge.fury.io/js/font-awesome-animation)
|
||||
# font-awesome-animation
|
||||
|
||||
> Simple animations using some CSS3 I found on the web.
|
||||
> Best used on glyphicons like [FontAwesome](http://fortawesome.github.io/Font-Awesome/).
|
||||
> Best used on glyphicons like [FontAwesome][]
|
||||
|
||||
|
||||
[][npm-link]
|
||||
[][npm-link]
|
||||
[][cdn-link]
|
||||
|
||||
## Getting started
|
||||
|
||||
Add
|
||||
Install from NPM:
|
||||
|
||||
```bash
|
||||
npm install font-awesome-animation
|
||||
```
|
||||
|
||||
Include CSS file in your index.html file:
|
||||
Or with a CDN:
|
||||
|
||||
[https://www.jsdelivr.com/package/npm/font-awesome-animation][cdn-link]
|
||||
|
||||
Include CSS file in your index.html file:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="font-awesome-animation.min.css">
|
||||
@ -23,11 +32,6 @@ See [live demo](https://l-lin.github.com/font-awesome-animation).
|
||||
|
||||
## Development
|
||||
|
||||
This project is using:
|
||||
|
||||
- the CSS preprocessor [Myth](http://www.myth.io/) to generate the prefixes for common browsers
|
||||
|
||||
|
||||
```bash
|
||||
# install dependencies
|
||||
npm install
|
||||
@ -40,3 +44,7 @@ npm run build
|
||||
|
||||
[MIT License](LICENSE)
|
||||
|
||||
[FontAwesome]: https://fontawesome.com/
|
||||
[npm-link]: https://www.npmjs.com/package/font-awesome-animation
|
||||
[cnd-link]: https://www.jsdelivr.com/package/npm/font-awesome-animation
|
||||
|
||||
|
||||
898
css/font-awesome-animation.css
Normal file
898
css/font-awesome-animation.css
Normal file
@ -0,0 +1,898 @@
|
||||
/*! font-awesome-animation v0.4.2 | MIT License | https://github.com/l-lin/font-awesome-animation */
|
||||
/* WRENCHING */
|
||||
@-webkit-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);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: wrench 2.5s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: wrench 1.2s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: wrench 3.7s ease infinite;
|
||||
animation: wrench 3.7s ease infinite;
|
||||
}
|
||||
|
||||
/* BELL */
|
||||
@-webkit-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);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: ring 2s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: ring 1s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: ring 3s ease infinite;
|
||||
animation: ring 3s ease infinite;
|
||||
}
|
||||
|
||||
/* VERTICAL */
|
||||
@-webkit-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);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: vertical 2s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: vertical 1s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: vertical 4s ease infinite;
|
||||
animation: vertical 4s ease infinite;
|
||||
}
|
||||
|
||||
/* HORIZONTAL */
|
||||
@-webkit-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);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: horizontal 2s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: horizontal 1s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: horizontal 3s ease infinite;
|
||||
animation: horizontal 3s ease infinite;
|
||||
}
|
||||
|
||||
/* FLASHING */
|
||||
@-webkit-keyframes flash {
|
||||
0%, 100%, 50% {
|
||||
opacity: 1;
|
||||
}
|
||||
25%, 75% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: flash 2s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: flash 1s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: flash 3s ease infinite;
|
||||
animation: flash 3s ease infinite;
|
||||
}
|
||||
|
||||
/* BOUNCE */
|
||||
@-webkit-keyframes bounce {
|
||||
0%, 10%, 20%, 50%, 80%, 100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
60% {
|
||||
transform: translateY(-15px);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: bounce 2s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: bounce 1s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: bounce 3s ease infinite;
|
||||
animation: bounce 3s ease infinite;
|
||||
}
|
||||
|
||||
/* SPIN */
|
||||
@-webkit-keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(359deg);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: spin 1.5s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: spin 0.7s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: spin 2.2s linear infinite;
|
||||
animation: spin 2.2s linear infinite;
|
||||
}
|
||||
|
||||
/* FLOAT */
|
||||
@-webkit-keyframes float {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-6px);
|
||||
}
|
||||
100% {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: float 2s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: float 1s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: float 3s linear infinite;
|
||||
animation: float 3s linear infinite;
|
||||
}
|
||||
|
||||
/* PULSE */
|
||||
@-webkit-keyframes pulse {
|
||||
0% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
50% {
|
||||
transform: scale(0.8);
|
||||
}
|
||||
100% {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: pulse 2s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: pulse 1s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: pulse 3s linear infinite;
|
||||
animation: pulse 3s linear infinite;
|
||||
}
|
||||
|
||||
/* SHAKE */
|
||||
.faa-shake.animated,
|
||||
.faa-shake.animated-hover:hover,
|
||||
.faa-parent.animated-hover:hover > .faa-shake {
|
||||
-webkit-animation: wrench 2.5s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: wrench 1.2s ease infinite;
|
||||
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 {
|
||||
-webkit-animation: wrench 3.7s ease infinite;
|
||||
animation: wrench 3.7s ease infinite;
|
||||
}
|
||||
|
||||
/* TADA */
|
||||
@-webkit-keyframes tada {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 20% {
|
||||
transform: scale(0.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);
|
||||
}
|
||||
}
|
||||
@keyframes tada {
|
||||
0% {
|
||||
transform: scale(1);
|
||||
}
|
||||
10%, 20% {
|
||||
transform: scale(0.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 {
|
||||
-webkit-animation: tada 2s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: tada 1s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: tada 3s linear infinite;
|
||||
animation: tada 3s linear infinite;
|
||||
}
|
||||
|
||||
/* PASSING */
|
||||
@-webkit-keyframes passing {
|
||||
0% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: passing 2s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: passing 1s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: passing 3s linear infinite;
|
||||
animation: passing 3s linear infinite;
|
||||
}
|
||||
|
||||
/* PASSING REVERSE */
|
||||
@-webkit-keyframes passing-reverse {
|
||||
0% {
|
||||
transform: translateX(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateX(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateX(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: passing-reverse 2s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: passing-reverse 1s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: passing-reverse 3s linear infinite;
|
||||
animation: passing-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
/* BURST */
|
||||
@-webkit-keyframes burst {
|
||||
0% {
|
||||
opacity: .6;
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.8);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: burst 2s infinite linear;
|
||||
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 {
|
||||
-webkit-animation: burst 1s infinite linear;
|
||||
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 {
|
||||
-webkit-animation: burst 3s infinite linear;
|
||||
animation: burst 3s infinite linear;
|
||||
}
|
||||
|
||||
/* FALLING */
|
||||
@-webkit-keyframes falling {
|
||||
0% {
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: falling 2s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: falling 1s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: falling 3s linear infinite;
|
||||
animation: falling 3s linear infinite;
|
||||
}
|
||||
|
||||
/* RISING */
|
||||
@-webkit-keyframes rising {
|
||||
0% {
|
||||
transform: translateY(50%);
|
||||
opacity: 0;
|
||||
}
|
||||
50% {
|
||||
transform: translateY(0%);
|
||||
opacity: 1;
|
||||
}
|
||||
100% {
|
||||
transform: translateY(-50%);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@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 {
|
||||
-webkit-animation: rising 2s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: rising 1s linear infinite;
|
||||
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 {
|
||||
-webkit-animation: rising 3s linear infinite;
|
||||
animation: rising 3s linear infinite;
|
||||
}
|
||||
/*# sourceMappingURL=font-awesome-animation.css.map */
|
||||
1
css/font-awesome-animation.css.map
Normal file
1
css/font-awesome-animation.css.map
Normal file
File diff suppressed because one or more lines are too long
2
css/font-awesome-animation.min.css
vendored
Normal file
2
css/font-awesome-animation.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
3523
package-lock.json
generated
3523
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
23
package.json
23
package.json
@ -4,6 +4,7 @@
|
||||
"dependencies": {},
|
||||
"author": "l-lin",
|
||||
"license": "MIT",
|
||||
"main": "sass/$npm_package_name.sass",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "git+https://github.com/l-lin/font-awesome-animation.git"
|
||||
@ -13,27 +14,31 @@
|
||||
},
|
||||
"homepage": "https://l-lin.github.io/font-awesome-animation",
|
||||
"devDependencies": {
|
||||
"autoprefixer": "~10.2.3",
|
||||
"clean-css-cli": "~4.3.0",
|
||||
"concat": "~1.0.3",
|
||||
"handlebars": "~4.7.6",
|
||||
"myth6": "~1.5.0",
|
||||
"node-sass": "~5.0.0",
|
||||
"postcss": "^8.1.0",
|
||||
"postcss-cli": "~8.3.1",
|
||||
"rimraf": "~3.0.2"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=12.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "npm run clean && npm run init:folders && npm run transform && npm run transform:compress && npm run generate:banner && npm run concat:banner",
|
||||
"clean": "rimraf -f build dist",
|
||||
"concat:banner": "concat build/banner.css build/$npm_package_name.css -o dist/$npm_package_name.css && concat build/banner.css build/$npm_package_name.min.css -o dist/$npm_package_name.min.css",
|
||||
"generate:banner": "node scripts/generate_banner.js build/banner.css",
|
||||
"init:folders": "mkdir -p build && mkdir -p dist",
|
||||
"transform": "myth src/font-awesome-animation.css build/$npm_package_name.css --sourcemap",
|
||||
"transform:compress": "myth src/font-awesome-animation.css build/$npm_package_name.min.css --sourcemap --compress",
|
||||
"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: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",
|
||||
"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",
|
||||
"version": "npm run build",
|
||||
"postversion": "git push && git push --tags"
|
||||
},
|
||||
"files": [
|
||||
"css",
|
||||
"sass"
|
||||
"scss"
|
||||
]
|
||||
}
|
||||
|
||||
@ -2,11 +2,7 @@ const Handlebars = require('handlebars');
|
||||
const fs = require('fs');
|
||||
const pjson = require('../package.json');
|
||||
|
||||
const template = Handlebars.compile('/*!\n' +
|
||||
' * {{ name }} - v{{ version }}\n' +
|
||||
' * https://github.com/{{ author }}/{{ name }}\n' +
|
||||
' * License: MIT\n' +
|
||||
' */');
|
||||
const template = Handlebars.compile('/*! {{ name }} v{{ version }} | MIT License | https://github.com/{{ author }}/{{ name }} */');
|
||||
|
||||
const result = template(pjson);
|
||||
|
||||
|
||||
@ -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;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user