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

faa-passing-reverse animation

Browse Source
This commit is contained in:
crecket 2016-01-13 20:10:58 +01:00
parent 486f1cf5f2
commit c2d0c4aad6
4 changed files with 112 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
demo/partials/usage.html
View File

@ -266,6 +266,26 @@
</a> </a>
</div> </div>
</div> </div>
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing-reverse animated"></i>
&nbsp;faa-passing-reverse animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing-reverse animated-hover"></i>
&nbsp;faa-passing-reverse animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-space-shuttle faa-passing-reverse"></i>
&nbsp;faa-passing-reverse
</a>
</div>
</div>
<div class="col-md-12"> <div class="col-md-12">
<div class="col-md-4"> <div class="col-md-4">
<a href="#"> <a href="#">

68
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

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

@ -293,6 +293,30 @@
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}
}
.faa-passing-reverse.animated,
.faa-passing-reverse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing {
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;
}
/* WAVE */ /* WAVE */
@keyframes burst { @keyframes burst {
0% {opacity:.6} 0% {opacity:.6}