mirror of
https://github.com/l-lin/font-awesome-animation.git
synced 2024-10-22 22:31:06 +08:00
Merge branch 'master' into gh-pages
This commit is contained in:
commit
d48ff327e6
@ -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>
|
||||
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>
|
||||
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="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>
|
||||
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>
|
||||
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="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>
|
||||
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>
|
||||
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="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>
|
||||
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>
|
||||
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="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>
|
||||
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>
|
||||
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="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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
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>
|
||||
faa-passing
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="clear"></div>
|
38
dist/font-awesome-animation.css
vendored
38
dist/font-awesome-animation.css
vendored
File diff suppressed because one or more lines are too long
2
dist/font-awesome-animation.min.css
vendored
2
dist/font-awesome-animation.min.css
vendored
File diff suppressed because one or more lines are too long
@ -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;
|
||||
}
|
||||
|
@ -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;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user