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 spin animation

Browse Source
This commit is contained in:
unknown 2014-01-24 17:16:56 +01:00
parent bc371463d5
commit 3a8f74966d
4 changed files with 65 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
demo/index.html
View File

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

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

@ -323,3 +323,27 @@
-ms-animation: bounce 2s ease infinite; -ms-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite; animation: bounce 2s ease infinite;
} }
/* SPIN */
@-moz-keyframes spin{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(359deg)}
}
@-ms-keyframes spin{
0%{-ms-transform:rotate(0deg)}
100%{-ms-transform:rotate(359deg)}
}
@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
.faa-spin.animated, .faa-spin.animated-hover:hover {
-moz-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}

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

@ -320,3 +320,27 @@
-ms-animation: bounce 2s ease infinite; -ms-animation: bounce 2s ease infinite;
animation: bounce 2s ease infinite; animation: bounce 2s ease infinite;
} }
/* SPIN */
@-moz-keyframes spin{
0%{-moz-transform:rotate(0deg)}
100%{-moz-transform:rotate(359deg)}
}
@-webkit-keyframes spin{
0%{-webkit-transform:rotate(0deg)}
100%{-webkit-transform:rotate(359deg)}
}
@-ms-keyframes spin{
0%{-ms-transform:rotate(0deg)}
100%{-ms-transform:rotate(359deg)}
}
@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)}
}
.faa-spin.animated, .faa-spin.animated-hover:hover {
-moz-animation: spin 1.5s linear infinite;
-webkit-animation: spin 1.5s linear infinite;
-ms-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}