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

Add float animation

Browse Source
This commit is contained in:
unknown 2014-01-24 17:34:05 +01:00
parent 3a8f74966d
commit 8511859976
4 changed files with 71 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo/index.html
View File

@ -187,6 +187,20 @@
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-plane faa-float animated"></i>
&nbsp;faa-float animated
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-plane faa-float animated-hover"></i>
&nbsp;faa-float animation-hover
</a>
</div>
</div>
</div>
</section>
</article>

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

@ -347,3 +347,31 @@
-ms-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
/* FLOAT */
@-moz-keyframes float{
0%{-moz-transform: translateY(0)}
50%{-moz-transform: translateY(-6px)}
100%{-moz-transform: translateY(0)}
}
@-webkit-keyframes float{
0%{-webkit-transform: translateY(0)}
50%{-webkit-transform: translateY(-6px)}
100%{-webkit-transform: translateY(0)}
}
@-ms-keyframes float{
0%{-ms-transform: translateY(0)}
50%{-ms-transform: translateY(-6px)}
100%{-ms-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 {
-moz-animation: float 2s linear infinite;
-webkit-animation: float 2s linear infinite;
-ms-animation: float 2s linear infinite;
animation: float 2s linear infinite;
}

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

File diff suppressed because one or more lines are too long

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

@ -344,3 +344,31 @@
-ms-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
/* FLOAT */
@-moz-keyframes float{
0%{-moz-transform: translateY(0)}
50%{-moz-transform: translateY(-6px)}
100%{-moz-transform: translateY(0)}
}
@-webkit-keyframes float{
0%{-webkit-transform: translateY(0)}
50%{-webkit-transform: translateY(-6px)}
100%{-webkit-transform: translateY(0)}
}
@-ms-keyframes float{
0%{-ms-transform: translateY(0)}
50%{-ms-transform: translateY(-6px)}
100%{-ms-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 {
-moz-animation: float 2s linear infinite;
-webkit-animation: float 2s linear infinite;
-ms-animation: float 2s linear infinite;
animation: float 2s linear infinite;
}