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

Add on parent hover #3

Browse Source
This commit is contained in:
Louis LIN 2014-07-04 10:10:59 +02:00
parent 63039fbd72
commit 9defe1ff2f
5 changed files with 184 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

158
demo/partials/usage.html
View File

@ -1,187 +1,267 @@
<p> <p>
Add the desired CSS class to the icon (or any element of your DOM). Add the desired CSS class to the icon (or any element of your DOM).
</p> </p>
<p>
For parent hover, add the CSS class <code>faa-parent</code> and <code>animated-hover</code> on the parent.
</p>
<br /> <br />
<div class="demo"> <div class="demo">
<div class="animation"> <div class="col-md-12">
<div class="font-animation"> <div class="col-md-4">
<h3> <h3>
On DOM load On DOM load
</h3> </h3>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<h3> <h3>
On hover On hover
</h3> </h3>
</div> </div>
<div class="col-md-4">
<h3>
On parent hover
</h3>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-wrench faa-wrench animated"></i> <i class="fa fa-wrench faa-wrench animated"></i>
&nbsp;faa-wrench animated &nbsp;faa-wrench animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-wrench faa-wrench animated-hover"></i> <i class="fa fa-wrench faa-wrench animated-hover"></i>
&nbsp;faa-wrench animated-hover &nbsp;faa-wrench animated-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-wrench faa-wrench"></i>
&nbsp;faa-wrench
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-bell faa-ring animated"></i> <i class="fa fa-bell faa-ring animated"></i>
&nbsp;faa-ring animated &nbsp;faa-ring animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-bell faa-ring animated-hover"></i> <i class="fa fa-bell faa-ring animated-hover"></i>
&nbsp;faa-ring animated-hover &nbsp;faa-ring animated-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-bell faa-ring"></i>
&nbsp;faa-ring
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-envelope faa-horizontal animated"></i> <i class="fa fa-envelope faa-horizontal animated"></i>
&nbsp;faa-horizontal animated &nbsp;faa-horizontal animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-envelope faa-horizontal animated-hover"></i> <i class="fa fa-envelope faa-horizontal animated-hover"></i>
&nbsp;faa-horizontal animated-hover &nbsp;faa-horizontal animated-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-envelope faa-horizontal"></i>
&nbsp;faa-horizontal
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated"></i> <i class="fa fa-thumbs-o-up faa-vertical animated"></i>
&nbsp;faa-vertical animated &nbsp;faa-vertical animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i> <i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>
&nbsp;faa-vertical animated-hover &nbsp;faa-vertical animated-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-thumbs-o-up faa-vertical"></i>
&nbsp;faa-vertical
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-warning faa-flash animated"></i> <i class="fa fa-warning faa-flash animated"></i>
&nbsp;faa-flash animated &nbsp;faa-flash animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-warning faa-flash animated-hover"></i> <i class="fa fa-warning faa-flash animated-hover"></i>
&nbsp;faa-flash animated-hover &nbsp;faa-flash animated-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-warning faa-flash"></i>
&nbsp;faa-flash
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated"></i> <i class="fa fa-thumbs-o-up faa-bounce animated"></i>
&nbsp;faa-bounce animated &nbsp;faa-bounce animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i> <i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>
&nbsp;faa-bounce animation-hover &nbsp;faa-bounce animation-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-thumbs-o-up faa-bounce"></i>
&nbsp;faa-bounce
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-spinner faa-spin animated"></i> <i class="fa fa-spinner faa-spin animated"></i>
&nbsp;faa-spin animated &nbsp;faa-spin animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-spinner faa-spin animated-hover"></i> <i class="fa fa-spinner faa-spin animated-hover"></i>
&nbsp;faa-spin animation-hover &nbsp;faa-spin animation-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-spinner faa-spin"></i>
&nbsp;faa-spin
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-plane faa-float animated"></i> <i class="fa fa-plane faa-float animated"></i>
&nbsp;faa-float animated &nbsp;faa-float animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-plane faa-float animated-hover"></i> <i class="fa fa-plane faa-float animated-hover"></i>
&nbsp;faa-float animation-hover &nbsp;faa-float animation-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-plane faa-float"></i>
&nbsp;faa-float
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-heart faa-pulse animated"></i> <i class="fa fa-heart faa-pulse animated"></i>
&nbsp;faa-pulse animated &nbsp;faa-pulse animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-heart faa-pulse animated-hover"></i> <i class="fa fa-heart faa-pulse animated-hover"></i>
&nbsp;faa-pulse animation-hover &nbsp;faa-pulse animation-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-heart faa-pulse"></i>
&nbsp;faa-pulse
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-envelope faa-shake animated"></i> <i class="fa fa-envelope faa-shake animated"></i>
&nbsp;faa-shake animated &nbsp;faa-shake animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-envelope faa-shake animated-hover"></i> <i class="fa fa-envelope faa-shake animated-hover"></i>
&nbsp;faa-shake animation-hover &nbsp;faa-shake animation-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-envelope faa-shake"></i>
&nbsp;faa-shake
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-trophy faa-tada animated"></i> <i class="fa fa-trophy faa-tada animated"></i>
&nbsp;faa-tada animated &nbsp;faa-tada animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-trophy faa-tada animated-hover"></i> <i class="fa fa-trophy faa-tada animated-hover"></i>
&nbsp;faa-tada animation-hover &nbsp;faa-tada animation-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-trophy faa-tada"></i>
&nbsp;faa-tada
</a>
</div> </div>
<div class="animation"> </div>
<div class="font-animation"> <div class="col-md-12">
<div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-space-shuttle faa-passing animated"></i> <i class="fa fa-space-shuttle faa-passing animated"></i>
&nbsp;faa-passing animated &nbsp;faa-passing animated
</a> </a>
</div> </div>
<div class="font-animation"> <div class="col-md-4">
<a href="#"> <a href="#">
<i class="fa fa-space-shuttle faa-passing animated-hover"></i> <i class="fa fa-space-shuttle faa-passing animated-hover"></i>
&nbsp;faa-passing animation-hover &nbsp;faa-passing animation-hover
</a> </a>
</div> </div>
<div class="col-md-4">
<a href="#" class="faa-parent animated-hover">
<i class="fa fa-space-shuttle faa-passing"></i>
&nbsp;faa-passing
</a>
</div>
</div> </div>
</div> </div>
<div class="clear"></div> <div class="clear"></div>

38
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

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

@ -16,7 +16,9 @@
68%{transform:rotate(24deg)} 68%{transform:rotate(24deg)}
75%{transform:rotate(0deg)} 75%{transform:rotate(0deg)}
} }
.faa-wrench.animated, .faa-wrench.animated-hover:hover { .faa-wrench.animated,
.faa-wrench.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-wrench {
animation: wrench 2.5s ease infinite; animation: wrench 2.5s ease infinite;
transform-origin-x: 90%; transform-origin-x: 90%;
transform-origin-y: 35%; transform-origin-y: 35%;
@ -37,7 +39,9 @@
18%{transform:rotate(12deg)} 18%{transform:rotate(12deg)}
20%{transform:rotate(0deg)} 20%{transform:rotate(0deg)}
} }
.faa-ring.animated, .faa-ring.animated-hover:hover { .faa-ring.animated,
.faa-ring.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-ring {
animation: ring 2s ease infinite; animation: ring 2s ease infinite;
transform-origin-x: 50%; transform-origin-x: 50%;
transform-origin-y: 0px; transform-origin-y: 0px;
@ -54,7 +58,9 @@
20%{transform:translate(0,3px)} 20%{transform:translate(0,3px)}
22%{transform:translate(0,0)} 22%{transform:translate(0,0)}
} }
.faa-vertical.animated, .faa-vertical.animated-hover:hover { .faa-vertical.animated,
.faa-vertical.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-vertical {
animation: vertical 2s ease infinite; animation: vertical 2s ease infinite;
} }
@ -68,7 +74,9 @@
30%{transform:translate(5px,0)} 30%{transform:translate(5px,0)}
36%{transform:translate(0,0)} 36%{transform:translate(0,0)}
} }
.faa-horizontal.animated, .faa-horizontal.animated-hover:hover { .faa-horizontal.animated,
.faa-horizontal.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-horizontal {
animation: horizontal 2s ease infinite; animation: horizontal 2s ease infinite;
} }
@ -77,7 +85,9 @@
0%,100%,50%{opacity:1} 0%,100%,50%{opacity:1}
25%,75%{opacity:0} 25%,75%{opacity:0}
} }
.faa-flash.animated, .faa-flash.animated-hover:hover { .faa-flash.animated,
.faa-flash.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-flash {
animation: flash 2s ease infinite; animation: flash 2s ease infinite;
} }
@ -87,7 +97,9 @@
40%{transform:translateY(-15px)} 40%{transform:translateY(-15px)}
60%{transform:translateY(-15px)} 60%{transform:translateY(-15px)}
} }
.faa-bounce.animated, .faa-bounce.animated-hover:hover { .faa-bounce.animated,
.faa-bounce.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-bounce {
animation: bounce 2s ease infinite; animation: bounce 2s ease infinite;
} }
@ -96,7 +108,9 @@
0%{transform:rotate(0deg)} 0%{transform:rotate(0deg)}
100%{transform:rotate(359deg)} 100%{transform:rotate(359deg)}
} }
.faa-spin.animated, .faa-spin.animated-hover:hover { .faa-spin.animated,
.faa-spin.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-spin {
animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;
} }
@ -106,7 +120,9 @@
50%{transform: translateY(-6px)} 50%{transform: translateY(-6px)}
100%{transform: translateY(0)} 100%{transform: translateY(0)}
} }
.faa-float.animated, .faa-float.animated-hover:hover { .faa-float.animated,
.faa-float.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-float {
animation: float 2s linear infinite; animation: float 2s linear infinite;
} }
@ -116,12 +132,16 @@
50% {transform: scale(0.8)} 50% {transform: scale(0.8)}
100% {transform: scale(1.1)} 100% {transform: scale(1.1)}
} }
.faa-pulse.animated, .faa-pulse.animated-hover:hover { .faa-pulse.animated,
.faa-pulse.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-pulse {
animation: pulse 2s linear infinite; animation: pulse 2s linear infinite;
} }
/* SHAKE */ /* SHAKE */
.faa-shake.animated, .faa-shake.animated-hover:hover { .faa-shake.animated,
.faa-shake.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-shake {
animation: wrench 2.5s ease infinite; animation: wrench 2.5s ease infinite;
} }
@ -134,7 +154,9 @@
80% {transform:scale(1) rotate(0)} 80% {transform:scale(1) rotate(0)}
} }
.faa-tada.animated, .faa-tada.animated-hover:hover { .faa-tada.animated,
.faa-tada.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-tada {
animation: tada 2s linear infinite; animation: tada 2s linear infinite;
} }
@ -145,6 +167,8 @@
100% {transform:translateX(50%); opacity:0} 100% {transform:translateX(50%); opacity:0}
} }
.faa-passing.animated, .faa-passing.animated-hover:hover { .faa-passing.animated,
.faa-passing.animated-hover:hover,
.faa-parent.animated-hover:hover > .faa-passing {
animation: passing 3s linear infinite; animation: passing 3s linear infinite;
} }

8
styles/main.css
View File

@ -211,12 +211,10 @@ pre code {
clear:both; clear:both;
} }
.demo .font-animation { .demo > div {
float: left; margin-bottom: 40px;
width: 400px;
margin-bottom: 20px;
} }
.font-animation i { .demo i {
font-size: 1.5em; font-size: 1.5em;
} }