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

Add pulse animation

Browse Source
This commit is contained in:
l-lin 2014-01-24 19:44:01 +01:00
parent 8511859976
commit 4d9bf1d198
4 changed files with 72 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
demo/index.html
View File

@ -201,13 +201,27 @@
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-heart faa-pulse animated"></i>
&nbsp;faa-pulse animated
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-heart faa-pulse animated-hover"></i>
&nbsp;faa-pulse animation-hover
</a>
</div>
</div>
</div>
</section>
</article>
</div>
<footer>
Designed and built with <i class="fa fa-heart faa-flash animated"></i> by <a href="https://github.com/l-lin">Louis LIN</a>
Designed and built with <i class="fa fa-heart faa-pulse animated"></i> by <a href="https://github.com/l-lin">Louis LIN</a>
</footer>
</body>
</html>

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

@ -375,3 +375,31 @@
-ms-animation: float 2s linear infinite;
animation: float 2s linear infinite;
}
/* PULSE */
@-moz-keyframes pulse {
0% {-moz-transform: scale(1.1)}
50% {-moz-transform: scale(0.8)}
100% {-moz-transform: scale(1)}
}
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(1)}
50% {-webkit-transform: scale(0.8)}
100% {-webkit-transform: scale(1)}
}
@-ms-keyframes pulse {
0% {-ms-transform: scale(1.1)}
50% {-ms-transform: scale(0.8)}
100% {-ms-transform: scale(1)}
}
@keyframes pulse {
0% {transform: scale(1.1)}
50% {transform: scale(0.8)}
100% {transform: scale(1)}
}
.faa-pulse.animated, .faa-pulse.animated-hover:hover {
-moz-animation: pulse 2s linear infinite;
-webkit-animation: pulse 2s linear infinite;
-ms-animation: pulse 2s linear infinite;
animation: pulse 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

@ -372,3 +372,31 @@
-ms-animation: float 2s linear infinite;
animation: float 2s linear infinite;
}
/* PULSE */
@-moz-keyframes pulse {
0% {-moz-transform: scale(1.1)}
50% {-moz-transform: scale(0.8)}
100% {-moz-transform: scale(1)}
}
@-webkit-keyframes pulse {
0% {-webkit-transform: scale(1)}
50% {-webkit-transform: scale(0.8)}
100% {-webkit-transform: scale(1)}
}
@-ms-keyframes pulse {
0% {-ms-transform: scale(1.1)}
50% {-ms-transform: scale(0.8)}
100% {-ms-transform: scale(1)}
}
@keyframes pulse {
0% {transform: scale(1.1)}
50% {transform: scale(0.8)}
100% {transform: scale(1)}
}
.faa-pulse.animated, .faa-pulse.animated-hover:hover {
-moz-animation: pulse 2s linear infinite;
-webkit-animation: pulse 2s linear infinite;
-ms-animation: pulse 2s linear infinite;
animation: pulse 2s linear infinite;
}