font-awesome-animation/demo/partials/usage.html

351 lines
11 KiB
HTML
Raw Normal View History

<p>
Add the desired CSS class to the icon (or any element of your DOM).
</p>
2014-07-04 16:10:59 +08:00
<p>
For parent hover, add the CSS class <code>faa-parent</code> and <code>animated-hover</code> on the parent.
</p>
2014-12-06 20:52:10 +08:00
<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">
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<h3>
On DOM load
</h3>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<h3>
On hover
</h3>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<h3>
On parent hover
</h3>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-wrench faa-wrench animated"></i>
&nbsp;faa-wrench animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-wrench faa-wrench animated-hover"></i>
&nbsp;faa-wrench animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-wrench faa-wrench"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-wrench
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-bell faa-ring animated"></i>
&nbsp;faa-ring animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-bell faa-ring animated-hover"></i>
&nbsp;faa-ring animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-bell faa-ring"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-ring
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-envelope faa-horizontal animated"></i>
&nbsp;faa-horizontal animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-envelope faa-horizontal animated-hover"></i>
&nbsp;faa-horizontal animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-envelope faa-horizontal"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-horizontal
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-thumbs-up faa-vertical animated"></i>
&nbsp;faa-vertical animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-thumbs-up faa-vertical animated-hover"></i>
&nbsp;faa-vertical animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-thumbs-up faa-vertical"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-vertical
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-exclamation-triangle faa-flash animated"></i>
&nbsp;faa-flash animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-exclamation-triangle faa-flash animated-hover"></i>
&nbsp;faa-flash animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-exclamation-triangle faa-flash"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-flash
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-thumbs-up faa-bounce animated"></i>
&nbsp;faa-bounce animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-thumbs-up faa-bounce animated-hover"></i>
&nbsp;faa-bounce animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-thumbs-up faa-bounce"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-bounce
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-spinner faa-spin animated"></i>
&nbsp;faa-spin animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-spinner faa-spin animated-hover"></i>
&nbsp;faa-spin animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-spinner faa-spin"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-spin
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-plane faa-float animated"></i>
&nbsp;faa-float animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-plane faa-float animated-hover"></i>
&nbsp;faa-float animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-plane faa-float"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-float
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-heart faa-pulse animated"></i>
&nbsp;faa-pulse animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-heart faa-pulse animated-hover"></i>
&nbsp;faa-pulse animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-heart faa-pulse"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-pulse
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-envelope faa-shake animated"></i>
&nbsp;faa-shake animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-envelope faa-shake animated-hover"></i>
&nbsp;faa-shake animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-envelope faa-shake"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-shake
</a>
</div>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
2014-05-17 23:02:45 +08:00
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-trophy faa-tada animated"></i>
2014-05-17 23:02:45 +08:00
&nbsp;faa-tada animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
2014-05-17 23:02:45 +08:00
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-trophy faa-tada animated-hover"></i>
&nbsp;faa-tada animated-hover
2014-05-17 23:02:45 +08:00
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-trophy faa-tada"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-tada
</a>
</div>
2014-05-17 23:02:45 +08:00
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-space-shuttle faa-passing animated"></i>
&nbsp;faa-passing animated
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-space-shuttle faa-passing animated-hover"></i>
&nbsp;faa-passing animated-hover
</a>
</div>
2014-07-04 16:10:59 +08:00
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-space-shuttle faa-passing"></i>
2014-07-04 16:10:59 +08:00
&nbsp;faa-passing
</a>
</div>
</div>
2016-01-14 03:10:58 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-space-shuttle faa-passing-reverse animated"></i>
2016-01-14 03:10:58 +08:00
&nbsp;faa-passing-reverse animated
</a>
</div>
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-space-shuttle faa-passing-reverse animated-hover"></i>
2016-01-14 03:10:58 +08:00
&nbsp;faa-passing-reverse animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-space-shuttle faa-passing-reverse"></i>
2016-01-14 03:10:58 +08:00
&nbsp;faa-passing-reverse
</a>
</div>
</div>
2014-08-18 02:11:12 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-circle faa-burst animated"></i>
2014-08-18 02:11:12 +08:00
&nbsp;faa-burst animated
</a>
</div>
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-circle faa-burst animated-hover"></i>
&nbsp;faa-burst animated-hover
2014-08-18 02:11:12 +08:00
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-circle faa-burst"></i>
2014-08-18 02:11:12 +08:00
&nbsp;faa-burst
</a>
</div>
</div>
2017-10-01 21:18:06 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-star faa-falling animated"></i>
2017-10-01 21:18:06 +08:00
&nbsp;faa-falling animated
</a>
</div>
<div class="col-md-4">
<a href="#">
2018-04-30 21:16:16 +08:00
<i class="fas fa-star faa-falling animated-hover"></i>
2017-10-01 21:18:06 +08:00
&nbsp;faa-falling animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
2018-04-30 21:16:16 +08:00
<i class="fas fa-star faa-falling"></i>
2017-10-01 21:18:06 +08:00
&nbsp;faa-falling
</a>
</div>
</div>
2020-04-01 04:12:54 +08:00
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fas fa-rocket faa-rising animated"></i>
&nbsp;faa-rising animated
</a>
</div>
<div class="col-md-4">
<a href="#">
<i class="fas fa-rocket faa-rising animated-hover"></i>
&nbsp;faa-rising animated-hover
</a>
</div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fas fa-rocket faa-rising"></i>
&nbsp;faa-rising
</a>
</div>
</div>
</div>
2014-12-06 20:52:10 +08:00
<div class="clear"></div>