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

feat(#30): add fa-rising

Browse Source
This commit is contained in:
Louis Lin 2020-03-31 22:12:54 +02:00
parent 9b69a99b89
commit 79c14ee7b4
7 changed files with 1507 additions and 394 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
README.md
View File

@ -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)

20
demo/partials/usage.html
View File

@ -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>
&nbsp;faa-rising animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fas fa-rocket faa-rising animated-hover"></i>
&nbsp;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>
&nbsp;faa-rising
</a>
</div>
</div>
</div>
<div class="clear"></div>

67
dist/font-awesome-animation.css vendored
View File

File diff suppressed because one or more lines are too long

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

File diff suppressed because one or more lines are too long

1271
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

24
src/_font-awesome-animation.scss
View File

@ -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;
}

24
src/font-awesome-animation.css
View File

@ -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;
}