From 5e6257fbda69bc32c786756c795994d6bcdbc25b Mon Sep 17 00:00:00 2001 From: Sam Form Date: Sun, 10 Apr 2016 20:42:53 +0200 Subject: [PATCH] scss file for font-awesome-animation which makes adding the file to your project easier --- src/_font-awesome-animation.scss | 340 +++++++++++++++++++++++++++++++ 1 file changed, 340 insertions(+) create mode 100644 src/_font-awesome-animation.scss diff --git a/src/_font-awesome-animation.scss b/src/_font-awesome-animation.scss new file mode 100644 index 0000000..8fa16bd --- /dev/null +++ b/src/_font-awesome-animation.scss @@ -0,0 +1,340 @@ +/* WRENCHING */ +@keyframes wrench { + 0%{transform:rotate(-12deg)} + 8%{transform:rotate(12deg)} + 10%{transform:rotate(24deg)} + 18%{transform:rotate(-24deg)} + 20%{transform:rotate(-24deg)} + 28%{transform:rotate(24deg)} + 30%{transform:rotate(24deg)} + 38%{transform:rotate(-24deg)} + 40%{transform:rotate(-24deg)} + 48%{transform:rotate(24deg)} + 50%{transform:rotate(24deg)} + 58%{transform:rotate(-24deg)} + 60%{transform:rotate(-24deg)} + 68%{transform:rotate(24deg)} + 75%,100%{transform:rotate(0deg)} +} +.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%; + transform-origin-z: initial; +} +.faa-wrench.animated.faa-fast, +.faa-wrench.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-wrench.faa-fast { + animation: wrench 1.2s ease infinite; +} +.faa-wrench.animated.faa-slow, +.faa-wrench.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-wrench.faa-slow { + animation: wrench 3.7s ease infinite; +} + +/* BELL */ +@keyframes ring { + 0%{transform:rotate(-15deg)} + 2%{transform:rotate(15deg)} + 4%{transform:rotate(-18deg)} + 6%{transform:rotate(18deg)} + 8%{transform:rotate(-22deg)} + 10%{transform:rotate(22deg)} + 12%{transform:rotate(-18deg)} + 14%{transform:rotate(18deg)} + 16%{transform:rotate(-12deg)} + 18%{transform:rotate(12deg)} + 20%,100%{transform:rotate(0deg)} +} +.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; + transform-origin-z: initial; +} +.faa-ring.animated.faa-fast, +.faa-ring.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-ring.faa-fast { + animation: ring 1s ease infinite; +} +.faa-ring.animated.faa-slow, +.faa-ring.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-ring.faa-slow { + animation: ring 3s ease infinite; +} + +/* VERTICAL */ +@keyframes vertical { + 0%{transform:translate(0,-3px)} + 4%{transform:translate(0,3px)} + 8%{transform:translate(0,-3px)} + 12%{transform:translate(0,3px)} + 16%{transform:translate(0,-3px)} + 20%{transform:translate(0,3px)} + 22%,100%{transform:translate(0,0)} +} +.faa-vertical.animated, +.faa-vertical.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-vertical { + animation: vertical 2s ease infinite; +} +.faa-vertical.animated.faa-fast, +.faa-vertical.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-vertical.faa-fast { + animation: vertical 1s ease infinite; +} +.faa-vertical.animated.faa-slow, +.faa-vertical.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-vertical.faa-slow { + animation: vertical 4s ease infinite; +} + +/* HORIZONTAL */ +@keyframes horizontal { + 0%{transform:translate(0,0)} + 6%{transform:translate(5px,0)} + 12%{transform:translate(0,0)} + 18%{transform:translate(5px,0)} + 24%{transform:translate(0,0)} + 30%{transform:translate(5px,0)} + 36%,100%{transform:translate(0,0)} +} +.faa-horizontal.animated, +.faa-horizontal.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-horizontal { + animation: horizontal 2s ease infinite; +} +.faa-horizontal.animated.faa-fast, +.faa-horizontal.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-horizontal.faa-fast { + animation: horizontal 1s ease infinite; +} +.faa-horizontal.animated.faa-slow, +.faa-horizontal.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-horizontal.faa-slow { + animation: horizontal 3s ease infinite; +} + +/* FLASHING */ +@keyframes flash { + 0%,100%,50%{opacity:1} + 25%,75%{opacity:0} +} +.faa-flash.animated, +.faa-flash.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-flash { + animation: flash 2s ease infinite; +} +.faa-flash.animated.faa-fast, +.faa-flash.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-flash.faa-fast { + animation: flash 1s ease infinite; +} +.faa-flash.animated.faa-slow, +.faa-flash.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-flash.faa-slow { + animation: flash 3s ease infinite; +} + +/* BOUNCE */ +@keyframes bounce { + 0%,10%,20%,50%,80%,100%{transform:translateY(0)} + 40%{transform:translateY(-15px)} + 60%{transform:translateY(-15px)} +} +.faa-bounce.animated, +.faa-bounce.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-bounce { + animation: bounce 2s ease infinite; +} +.faa-bounce.animated.faa-fast, +.faa-bounce.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-bounce.faa-fast { + animation: bounce 1s ease infinite; +} +.faa-bounce.animated.faa-slow, +.faa-bounce.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-bounce.faa-slow { + animation: bounce 3s ease infinite; +} + +/* SPIN */ +@keyframes spin{ + 0%{transform:rotate(0deg)} + 100%{transform:rotate(359deg)} +} +.faa-spin.animated, +.faa-spin.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-spin { + animation: spin 1.5s linear infinite; +} +.faa-spin.animated.faa-fast, +.faa-spin.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-spin.faa-fast { + animation: spin 0.7s linear infinite; +} +.faa-spin.animated.faa-slow, +.faa-spin.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-spin.faa-slow { + animation: spin 2.2s linear infinite; +} + +/* FLOAT */ +@keyframes float{ + 0%{transform: translateY(0)} + 50%{transform: translateY(-6px)} + 100%{transform: translateY(0)} +} +.faa-float.animated, +.faa-float.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-float { + animation: float 2s linear infinite; +} +.faa-float.animated.faa-fast, +.faa-float.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-float.faa-fast { + animation: float 1s linear infinite; +} +.faa-float.animated.faa-slow, +.faa-float.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-float.faa-slow { + animation: float 3s linear infinite; +} + +/* PULSE */ +@keyframes pulse { + 0% {transform: scale(1.1)} + 50% {transform: scale(0.8)} + 100% {transform: scale(1.1)} +} +.faa-pulse.animated, +.faa-pulse.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-pulse { + animation: pulse 2s linear infinite; +} +.faa-pulse.animated.faa-fast, +.faa-pulse.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-pulse.faa-fast { + animation: pulse 1s linear infinite; +} +.faa-pulse.animated.faa-slow, +.faa-pulse.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-pulse.faa-slow { + animation: pulse 3s linear infinite; +} + +/* SHAKE */ +.faa-shake.animated, +.faa-shake.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-shake { + animation: wrench 2.5s ease infinite; +} +.faa-shake.animated.faa-fast, +.faa-shake.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-shake.faa-fast { + animation: wrench 1.2s ease infinite; +} +.faa-shake.animated.faa-slow, +.faa-shake.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-shake.faa-slow { + animation: wrench 3.7s ease infinite; +} + +/* TADA */ +@keyframes tada { + 0% {transform: scale(1)} + 10%,20% {transform:scale(.9) rotate(-8deg);} + 30%,50%,70% {transform:scale(1.3) rotate(8deg)} + 40%,60% {transform:scale(1.3) rotate(-8deg)} + 80%,100% {transform:scale(1) rotate(0)} +} + +.faa-tada.animated, +.faa-tada.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-tada { + animation: tada 2s linear infinite; +} +.faa-tada.animated.faa-fast, +.faa-tada.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-tada.faa-fast { + animation: tada 1s linear infinite; +} +.faa-tada.animated.faa-slow, +.faa-tada.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-tada.faa-slow { + animation: tada 3s linear infinite; +} + +/* PASSING */ +@keyframes passing { + 0% {transform:translateX(-50%); opacity:0} + 50% {transform:translateX(0%); opacity:1} + 100% {transform:translateX(50%); opacity:0} +} + +.faa-passing.animated, +.faa-passing.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-passing { + animation: passing 2s linear infinite; +} +.faa-passing.animated.faa-fast, +.faa-passing.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-passing.faa-fast { + animation: passing 1s linear infinite; +} +.faa-passing.animated.faa-slow, +.faa-passing.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-passing.faa-slow { + animation: passing 3s linear infinite; +} + +/* PASSING REVERSE */ + +@keyframes passing-reverse { + 0% {transform:translateX(50%); opacity:0} + 50% {transform:translateX(0%); opacity:1} + 100% {transform:translateX(-50%); opacity:0} +} + +.faa-passing-reverse.animated, +.faa-passing-reverse.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-passing-reverse { + animation: passing-reverse 2s linear infinite; +} +.faa-passing-reverse.animated.faa-fast, +.faa-passing-reverse.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-fast { + animation: passing-reverse 1s linear infinite; +} +.faa-passing-reverse.animated.faa-slow, +.faa-passing-reverse.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-passing-reverse.faa-slow { + animation: passing-reverse 3s linear infinite; +} + +/* WAVE */ +@keyframes burst { + 0% {opacity:.6} + 50% {transform:scale(1.8);opacity:0} + 100%{opacity:0} +} +.faa-burst.animated, +.faa-burst.animated-hover:hover, +.faa-parent.animated-hover:hover > .faa-burst { + animation: burst 2s infinite linear +} +.faa-burst.animated.faa-fast, +.faa-burst.animated-hover.faa-fast:hover, +.faa-parent.animated-hover:hover > .faa-burst.faa-fast { + animation: burst 1s infinite linear +} +.faa-burst.animated.faa-slow, +.faa-burst.animated-hover.faa-slow:hover, +.faa-parent.animated-hover:hover > .faa-burst.faa-slow { + animation: burst 3s infinite linear +}