mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-12-28 22:41:31 +08:00
331 lines
10 KiB
HTML
331 lines
10 KiB
HTML
<p>
|
|
Add the desired CSS class to the icon (or any element of your DOM).
|
|
</p>
|
|
<p>
|
|
For parent hover, add the CSS class <code>faa-parent</code> and <code>animated-hover</code> on the parent.
|
|
</p>
|
|
<p>
|
|
You can regulate the speed of the animation by adding the CSS class <code>faa-fast</code> or <code>faa-slow</code>.
|
|
</p>
|
|
<br />
|
|
<div class="demo">
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<h3>
|
|
On DOM load
|
|
</h3>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h3>
|
|
On hover
|
|
</h3>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<h3>
|
|
On parent hover
|
|
</h3>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-wrench faa-wrench animated"></i>
|
|
faa-wrench animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-wrench faa-wrench animated-hover"></i>
|
|
faa-wrench animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-wrench faa-wrench"></i>
|
|
faa-wrench
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-bell faa-ring animated"></i>
|
|
faa-ring animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-bell faa-ring animated-hover"></i>
|
|
faa-ring animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-bell faa-ring"></i>
|
|
faa-ring
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-envelope faa-horizontal animated"></i>
|
|
faa-horizontal animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-envelope faa-horizontal animated-hover"></i>
|
|
faa-horizontal animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-envelope faa-horizontal"></i>
|
|
faa-horizontal
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-thumbs-o-up faa-vertical animated"></i>
|
|
faa-vertical animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>
|
|
faa-vertical animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-thumbs-o-up faa-vertical"></i>
|
|
faa-vertical
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-warning faa-flash animated"></i>
|
|
faa-flash animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-warning faa-flash animated-hover"></i>
|
|
faa-flash animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-warning faa-flash"></i>
|
|
faa-flash
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-thumbs-o-up faa-bounce animated"></i>
|
|
faa-bounce animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>
|
|
faa-bounce animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-thumbs-o-up faa-bounce"></i>
|
|
faa-bounce
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-spinner faa-spin animated"></i>
|
|
faa-spin animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-spinner faa-spin animated-hover"></i>
|
|
faa-spin animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-spinner faa-spin"></i>
|
|
faa-spin
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-plane faa-float animated"></i>
|
|
faa-float animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-plane faa-float animated-hover"></i>
|
|
faa-float animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-plane faa-float"></i>
|
|
faa-float
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-heart faa-pulse animated"></i>
|
|
faa-pulse animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-heart faa-pulse animated-hover"></i>
|
|
faa-pulse animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-heart faa-pulse"></i>
|
|
faa-pulse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-envelope faa-shake animated"></i>
|
|
faa-shake animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-envelope faa-shake animated-hover"></i>
|
|
faa-shake animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-envelope faa-shake"></i>
|
|
faa-shake
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-trophy faa-tada animated"></i>
|
|
faa-tada animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-trophy faa-tada animated-hover"></i>
|
|
faa-tada animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-trophy faa-tada"></i>
|
|
faa-tada
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-space-shuttle faa-passing animated"></i>
|
|
faa-passing animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-space-shuttle faa-passing animated-hover"></i>
|
|
faa-passing animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-space-shuttle faa-passing"></i>
|
|
faa-passing
|
|
</a>
|
|
</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>
|
|
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>
|
|
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>
|
|
faa-passing-reverse
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-circle-o faa-burst animated"></i>
|
|
faa-burst animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-circle-o faa-burst animated-hover"></i>
|
|
faa-burst animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-circle-o faa-burst"></i>
|
|
faa-burst
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="col-md-12">
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-star-o faa-falling animated"></i>
|
|
faa-falling animated
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#">
|
|
<i class="fa fa-star-o faa-falling animated-hover"></i>
|
|
faa-falling animated-hover
|
|
</a>
|
|
</div>
|
|
<div class="col-md-4">
|
|
<a href="#" class="faa-parent animated-hover">
|
|
<i class="fa fa-star-o faa-falling"></i>
|
|
faa-falling
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="clear"></div>
|