mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-27 14:01:33 +08:00
feat(#30): add fa-rising
This commit is contained in:
Louis Lin
parent
9b69a99b89
commit
79c14ee7b4
21
README.md
21
README.md
@ -8,18 +8,22 @@ Getting started
|
||||
Download
|
||||
----------------
|
||||
### Manually
|
||||
|
||||
The files can be downloaded from:
|
||||
|
||||
* Minified [CSS](https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.min.css) for production usage
|
||||
* Un-minified [CSS](https://raw.githubusercontent.com/l-lin/font-awesome-animation/master/dist/font-awesome-animation.css) for development
|
||||
|
||||
### With BowerJS
|
||||
```
|
||||
$ bower install font-awesome-animation
|
||||
|
||||
```bash
|
||||
bower install font-awesome-animation
|
||||
```
|
||||
|
||||
Installation
|
||||
----------------
|
||||
Include CSS file in your index.html file:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="font-awesome-animation.min.css">
|
||||
```
|
||||
@ -32,22 +36,25 @@ Development
|
||||
================
|
||||
This project is using:
|
||||
* [GruntJS](http://gruntjs.com/) for adding prefixes and minification purpose
|
||||
* the CSS preprocessor [Myth](http://www.myth.io/) to generate the the prefixes for common browsers
|
||||
* the CSS preprocessor [Myth](http://www.myth.io/) to generate the prefixes for common browsers
|
||||
|
||||
Getting started
|
||||
----------------
|
||||
You will need to install the dependencies:
|
||||
```
|
||||
$ npm install
|
||||
|
||||
```bash
|
||||
npm install
|
||||
```
|
||||
|
||||
Build
|
||||
----------------
|
||||
You can generate the CSS file with prefixes and the minified CSS file by executing the following command:
|
||||
```
|
||||
$ grunt
|
||||
|
||||
```bash
|
||||
grunt
|
||||
```
|
||||
|
||||
License
|
||||
================
|
||||
|
||||
[MIT License](http://en.wikipedia.org/wiki/MIT_License)
|
||||
|
||||
@ -326,5 +326,25 @@
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-md-12">
|
||||
<div class="col-md-4">
|
||||
<a href="#">
|
||||
<i class="fas fa-rocket faa-rising animated"></i>
|
||||
faa-rising animated
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="#">
|
||||
<i class="fas fa-rocket faa-rising animated-hover"></i>
|
||||
faa-rising animated-hover
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<a href="#" class="faa-parent animated-hover">
|
||||
<i class="fas fa-rocket faa-rising"></i>
|
||||
faa-rising
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
||||
|
||||
67
dist/font-awesome-animation.css
vendored
67
dist/font-awesome-animation.css
vendored
File diff suppressed because one or more lines are too long
2
dist/font-awesome-animation.min.css
vendored
2
dist/font-awesome-animation.min.css
vendored
File diff suppressed because one or more lines are too long
1271
package-lock.json
generated
1271
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
@ -1,342 +1,342 @@
|
||||
/* 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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: horizontal 3s ease infinite;
|
||||
}
|
||||
|
||||
/* FLASHING */
|
||||
@keyframes flash {
|
||||
0%,100%,50%{opacity:1}
|
||||
25%,75%{opacity:0}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: bounce 3s ease infinite;
|
||||
}
|
||||
|
||||
/* SPIN */
|
||||
@keyframes spin{
|
||||
0%{transform:rotate(0deg)}
|
||||
100%{transform:rotate(359deg)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: spin 2.2s linear infinite;
|
||||
}
|
||||
|
||||
/* FLOAT */
|
||||
@keyframes float{
|
||||
0%{transform: translateY(0)}
|
||||
50%{transform: translateY(-6px)}
|
||||
100%{transform: translateY(0)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: float 3s linear infinite;
|
||||
}
|
||||
|
||||
/* PULSE */
|
||||
@keyframes pulse {
|
||||
0% {transform: scale(1.1)}
|
||||
50% {transform: scale(0.8)}
|
||||
100% {transform: scale(1.1)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: passing-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
/* BURST */
|
||||
@keyframes burst {
|
||||
0% {opacity:.6}
|
||||
50% {transform:scale(1.8);opacity:0}
|
||||
100%{opacity:0}
|
||||
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
|
||||
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
|
||||
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
|
||||
animation: burst 3s infinite linear
|
||||
}
|
||||
|
||||
/* FALLING */
|
||||
@ -345,19 +345,41 @@
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
|
||||
@ -1,342 +1,342 @@
|
||||
/* 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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: horizontal 3s ease infinite;
|
||||
}
|
||||
|
||||
/* FLASHING */
|
||||
@keyframes flash {
|
||||
0%,100%,50%{opacity:1}
|
||||
25%,75%{opacity:0}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: bounce 3s ease infinite;
|
||||
}
|
||||
|
||||
/* SPIN */
|
||||
@keyframes spin{
|
||||
0%{transform:rotate(0deg)}
|
||||
100%{transform:rotate(359deg)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: spin 2.2s linear infinite;
|
||||
}
|
||||
|
||||
/* FLOAT */
|
||||
@keyframes float{
|
||||
0%{transform: translateY(0)}
|
||||
50%{transform: translateY(-6px)}
|
||||
100%{transform: translateY(0)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: float 3s linear infinite;
|
||||
}
|
||||
|
||||
/* PULSE */
|
||||
@keyframes pulse {
|
||||
0% {transform: scale(1.1)}
|
||||
50% {transform: scale(0.8)}
|
||||
100% {transform: scale(1.1)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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)}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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}
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
animation: passing-reverse 3s linear infinite;
|
||||
}
|
||||
|
||||
/* BURST */
|
||||
@keyframes burst {
|
||||
0% {opacity:.6}
|
||||
50% {transform:scale(1.8);opacity:0}
|
||||
100%{opacity:0}
|
||||
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
|
||||
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
|
||||
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
|
||||
animation: burst 3s infinite linear
|
||||
}
|
||||
|
||||
/* FALLING */
|
||||
@ -345,19 +345,41 @@
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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