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

Added speed option

Browse Source 
Added class "faa-speed-fast" to make the animation faster by reducing the animation speed. Similar approach can be implemented to slowdown the speed or have various speed limits.
This commit is contained in:
Nis 2014-12-06 18:27:34 +11:00
parent 9590b160f1
commit 7544e45506
1 changed files with 72 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -24,6 +24,14 @@
transform-origin-y: 35%; transform-origin-y: 35%;
transform-origin-z: initial; transform-origin-z: initial;
} }
.faa-wrench.animated.faa-speed-fast,
.faa-wrench.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-wrench.faa-speed-fast {
animation: wrench 1.2s ease infinite;
transform-origin-x: 90%;
transform-origin-y: 35%;
transform-origin-z: initial;
}
/* BELL */ /* BELL */
@keyframes ring { @keyframes ring {
@ -47,6 +55,14 @@
transform-origin-y: 0px; transform-origin-y: 0px;
transform-origin-z: initial; transform-origin-z: initial;
} }
.faa-ring.animated.faa-speed-fast,
.faa-ring.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-ring.faa-speed-fast {
animation: ring 1s ease infinite;
transform-origin-x: 50%;
transform-origin-y: 0px;
transform-origin-z: initial;
}
/* VERTICAL */ /* VERTICAL */
@keyframes vertical { @keyframes vertical {
@ -63,6 +79,11 @@
.faa-parent.animated-hover:hover > .faa-vertical { .faa-parent.animated-hover:hover > .faa-vertical {
animation: vertical 2s ease infinite; animation: vertical 2s ease infinite;
} }
.faa-vertical.animated.faa-speed-fast,
.faa-vertical.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-vertical.faa-speed-fast {
animation: vertical 1s ease infinite;
}
/* HORIZONTAL */ /* HORIZONTAL */
@keyframes horizontal { @keyframes horizontal {
@ -79,6 +100,11 @@
.faa-parent.animated-hover:hover > .faa-horizontal { .faa-parent.animated-hover:hover > .faa-horizontal {
animation: horizontal 2s ease infinite; animation: horizontal 2s ease infinite;
} }
.faa-horizontal.animated.faa-speed-fast,
.faa-horizontal.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-horizontal.faa-speed-fast {
animation: horizontal 1s ease infinite;
}
/* FLASHING */ /* FLASHING */
@keyframes flash { @keyframes flash {
@ -90,6 +116,11 @@
.faa-parent.animated-hover:hover > .faa-flash { .faa-parent.animated-hover:hover > .faa-flash {
animation: flash 2s ease infinite; animation: flash 2s ease infinite;
} }
.faa-flash.animated.faa-speed-fast,
.faa-flash.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-flash.faa-speed-fast {
animation: flash 1s ease infinite;
}
/* BOUNCE */ /* BOUNCE */
@keyframes bounce { @keyframes bounce {
@ -102,6 +133,11 @@
.faa-parent.animated-hover:hover > .faa-bounce { .faa-parent.animated-hover:hover > .faa-bounce {
animation: bounce 2s ease infinite; animation: bounce 2s ease infinite;
} }
.faa-bounce.animated.faa-speed-fast,
.faa-bounce.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-bounce.faa-speed-fast {
animation: bounce 1s ease infinite;
}
/* SPIN */ /* SPIN */
@keyframes spin{ @keyframes spin{
@ -113,6 +149,11 @@
.faa-parent.animated-hover:hover > .faa-spin { .faa-parent.animated-hover:hover > .faa-spin {
animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;
} }
.faa-spin.animated.faa-speed-fast,
.faa-spin.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-spin.faa-speed-fast {
animation: spin 0.7s linear infinite;
}
/* FLOAT */ /* FLOAT */
@keyframes float{ @keyframes float{
@ -125,6 +166,11 @@
.faa-parent.animated-hover:hover > .faa-float { .faa-parent.animated-hover:hover > .faa-float {
animation: float 2s linear infinite; animation: float 2s linear infinite;
} }
.faa-float.animated.faa-speed-fast,
.faa-float.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-float.faa-speed-fast {
animation: float 1s linear infinite;
}
/* PULSE */ /* PULSE */
@keyframes pulse { @keyframes pulse {
@ -137,6 +183,11 @@
.faa-parent.animated-hover:hover > .faa-pulse { .faa-parent.animated-hover:hover > .faa-pulse {
animation: pulse 2s linear infinite; animation: pulse 2s linear infinite;
} }
.faa-pulse.animated.faa-speed-fast,
.faa-pulse.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-pulse.faa-speed-fast {
animation: pulse 1s linear infinite;
}
/* SHAKE */ /* SHAKE */
.faa-shake.animated, .faa-shake.animated,
@ -144,6 +195,11 @@
.faa-parent.animated-hover:hover > .faa-shake { .faa-parent.animated-hover:hover > .faa-shake {
animation: wrench 2.5s ease infinite; animation: wrench 2.5s ease infinite;
} }
.faa-shake.animated.faa-speed-fast,
.faa-shake.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-shake.faa-speed-fast {
animation: wrench 1.2s ease infinite;
}
/* TADA */ /* TADA */
@keyframes tada { @keyframes tada {
@ -159,6 +215,11 @@
.faa-parent.animated-hover:hover > .faa-tada { .faa-parent.animated-hover:hover > .faa-tada {
animation: tada 2s linear infinite; animation: tada 2s linear infinite;
} }
.faa-tada.animated.faa-speed-fast,
.faa-tada.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-tada.faa-speed-fast {
animation: tada 1s linear infinite;
}
/* PASSING */ /* PASSING */
@keyframes passing { @keyframes passing {
@ -172,6 +233,12 @@
.faa-parent.animated-hover:hover > .faa-passing { .faa-parent.animated-hover:hover > .faa-passing {
animation: passing 3s linear infinite; animation: passing 3s linear infinite;
} }
.faa-passing.animated.faa-speed-fast,
.faa-passing.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-passing.faa-speed-fast {
animation: passing 1s linear infinite;
}
/* WAVE */ /* WAVE */
@keyframes burst { @keyframes burst {
@ -184,3 +251,8 @@
.faa-parent.animated-hover:hover > .faa-burst { .faa-parent.animated-hover:hover > .faa-burst {
animation: burst 3s infinite linear animation: burst 3s infinite linear
} }
.faa-burst.animated.faa-speed-fast,
.faa-burst.animated-hover.faa-speed-fast:hover,
.faa-parent.animated-hover:hover > .faa-burst.faa-speed-fast {
animation: burst 1s infinite linear
}