mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-10-22 22:31:06 +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
@ -345,7 +345,6 @@
|
||||
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 {
|
||||
@ -361,3 +360,26 @@
|
||||
.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;
|
||||
}
|
||||
|
||||
|
||||
@ -345,7 +345,6 @@
|
||||
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 {
|
||||
@ -361,3 +360,26 @@
|
||||
.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