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

Add 🎉 animation!

Browse Source
This commit is contained in:
l-lin 2014-05-17 17:02:45 +02:00
parent 6cac6c46d8
commit 36fbad5f60
4 changed files with 96 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo/partials/usage.html
View File

@ -155,5 +155,19 @@
</a> </a>
</div> </div>
</div> </div>
<div class="animation">
<div class="font-animation">
<a href="#">
<i class="fa fa-trophy faa-tada animated"></i>
&nbsp;faa-tada animated
</a>
</div>
<div class="font-animation">
<a href="#">
<i class="fa fa-trophy faa-tada animated-hover"></i>
&nbsp;faa-tada animation-hover
</a>
</div>
</div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

69
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

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

@ -124,3 +124,16 @@
.faa-shake.animated, .faa-shake.animated-hover:hover { .faa-shake.animated, .faa-shake.animated-hover:hover {
animation: wrench 2.5s ease infinite; animation: wrench 2.5s ease infinite;
} }
/* TADA */
@keyframes tada {
0% {transform: scale(1)}
10%,20% {transform:scale(.9) rotate(-8deg);}
30%,50%,70% {transform:scale(1.3) rotate(8deg)}
40%,60% {transform:scale(1.3) rotate(-8deg)}
80% {transform:scale(1) rotate(0)}
}
.faa-tada.animated, .faa-tada.animated-hover:hover {
animation: tada 2s linear infinite;
}