FlandreScarle7/font-awesome-animation
1
0
Fork 0
mirror of https://github.com/l-lin/font-awesome-animation.git synced 2024-10-22 22:31:06 +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>
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>
<br />
<div class="demo">
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<h3>
On DOM load
</h3>
</div>
<div class="font-animation">
<div class="col-md-4">
<h3>
On hover
</h3>
</div>
<div class="col-md-4">
<h3>
On parent hover
</h3>
</div>
</div>
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-wrench faa-wrench animated"></i>
&nbsp;faa-wrench animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-wrench faa-wrench animated-hover"></i>
&nbsp;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>
&nbsp;faa-wrench
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-bell faa-ring animated"></i>
&nbsp;faa-ring animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-bell faa-ring animated-hover"></i>
&nbsp;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>
&nbsp;faa-ring
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-horizontal animated"></i>
&nbsp;faa-horizontal animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-horizontal animated-hover"></i>
&nbsp;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>
&nbsp;faa-horizontal
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated"></i>
&nbsp;faa-vertical animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-vertical animated-hover"></i>
&nbsp;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>
&nbsp;faa-vertical
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-warning faa-flash animated"></i>
&nbsp;faa-flash animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-warning faa-flash animated-hover"></i>
&nbsp;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>
&nbsp;faa-flash
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated"></i>
&nbsp;faa-bounce animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-thumbs-o-up faa-bounce animated-hover"></i>
&nbsp;faa-bounce animation-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>
&nbsp;faa-bounce
</a>
</div>
</div>
<div class="animation">
<div class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-spinner faa-spin animated"></i>
&nbsp;faa-spin animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-spinner faa-spin animated-hover"></i>
&nbsp;faa-spin animation-hover
</a>
</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 class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-plane faa-float animated"></i>
&nbsp;faa-float animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-plane faa-float animated-hover"></i>
&nbsp;faa-float animation-hover
</a>
</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 class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-heart faa-pulse animated"></i>
&nbsp;faa-pulse animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-heart faa-pulse animated-hover"></i>
&nbsp;faa-pulse animation-hover
</a>
</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 class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-shake animated"></i>
&nbsp;faa-shake animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-envelope faa-shake animated-hover"></i>
&nbsp;faa-shake animation-hover
</a>
</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 class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-trophy faa-tada animated"></i>
&nbsp;faa-tada animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-trophy faa-tada animated-hover"></i>
&nbsp;faa-tada animation-hover
</a>
</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 class="font-animation">
<div class="col-md-12">
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing animated"></i>
&nbsp;faa-passing animated
</a>
</div>
<div class="font-animation">
<div class="col-md-4">
<a href="#">
<i class="fa fa-space-shuttle faa-passing animated-hover"></i>
&nbsp;faa-passing animation-hover
</a>
</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 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)}
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;
transform-origin-x: 90%;
transform-origin-y: 35%;
@ -37,7 +39,9 @@
18%{transform:rotate(12deg)}
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;
transform-origin-x: 50%;
transform-origin-y: 0px;
@ -54,7 +58,9 @@
20%{transform:translate(0,3px)}
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;
}
@ -68,7 +74,9 @@
30%{transform:translate(5px,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;
}
@ -77,7 +85,9 @@
0%,100%,50%{opacity:1}
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;
}
@ -87,7 +97,9 @@
40%{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;
}
@ -96,7 +108,9 @@
0%{transform:rotate(0deg)}
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;
}
@ -106,7 +120,9 @@
50%{transform: translateY(-6px)}
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;
}
@ -116,12 +132,16 @@
50% {transform: scale(0.8)}
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;
}
/* 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;
}
@ -134,7 +154,9 @@
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;
}
@ -145,6 +167,8 @@
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;
}

8
styles/main.css
View File

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